Sliding Task Lists project (day 3) – using ModalPopup extender to create panels for adding new tasks

ModalPopup extender
For people that read this blog for some time now, you may remember the post “Darken the page and set focus on the user input”. Ok here is a better/quicker solution and it’s called ModalPopup extender. Like the saying goes: live and learn!

Today, I’ve added panels (only the UI, the save button is not functional yet) that open when user chooses to add a task to one of the lists. Since, the application is designed to have three different categories of tasks (big, quick and everyday) I have three link buttons (“Add Big Task”, “Add Quick Task” and “Add Everyday Task”).

The code for link buttons looks like this:

OPEN CODE IN NEW WINDOW

Next thing I’ve done is added three panels, each representing my modal popup window, where I’ll let users enter the task. One panel holds the modal popup for “Big Tasks”, one for “Quick Tasks” and one of course for the “Everyday Tasks”. You’ll notice I’ve wrapped the code inside the panel in UpdatePanel control, so that I can later perform saving to database without a full postback. The code for these three panels looks like this:

OPEN CODE IN NEW WINDOW

The last thing I’ve done today was adding the ModalPopupExtender, so that I can convert those panels into modal popup windows. Take a look at the code first and I’ll explain then the ModalPopupProperties for the first panel:

OPEN CODE IN NEW WINDOW

TargetControlId property determines which control will fire up the modal popup. In my case those are the link buttons I’ve added at the top in the action bar. Next property is PopupControlID. This property indicates which control will act as modal popup window. In my case those are the three panels. Next property is the BackgroundCssClass, which is really interesting feature. It lets you set the css class for the whole background screen behind your popup. Keep reading, because I’ll show you the CSS I’ve used to make background blurred and transparent. Next property is OkControlID. This is simply the id of the control that represents confirmation or ok (hehe) button of your popup. You’ll notice I have a save button in each of the panels, and those are my OkControls. Following control is cancel control and similar to the ok control, this one represents cancellation (closes popup with no actions/consequences).

Now we are only left with the css and few tricks there. First of all, here is the css for the transparent blurred background (remember the BackgroundCssClass property we set to modal_bg) :

OPEN CODE IN NEW WINDOW

You need to use filter and opacity properties both, because one works in IE and not in FF and vice versa. However the 70 and 0.7 both represent 70% transparency.

And finally the last thing. I’ve noticed that I need to set to my panels position:absolute, otherwise they all show when page loads. Try leaving that out and you’ll see what I mean.

OPEN CODE IN NEW WINDOW

The working (take that working with reserve. Only the things explained on this blog are working.) application can be found here :

http://www.reblogger.com/lab/STL

Tomorrow we’ll create the database tables and add code for adding/saving new tasks, so drop by if you get a chance.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


Advertisements

Thanks Shawn – CascadingDropDown extender (explained)

Several days ago I wrote a post on CascadingDropDown extender. I was a bit frustrated and blog about it, because I have thought it is only possible to use this extender
in conjunction with xml document. Turns out, you can use it with datatables indeed.

Thanks to Shawn Burke from Microsoft (that’s a world class support,ehh? I ask question on my blog and they answer it on my blog 🙂 here is the solution :

http://atlas.asp.net/atlastoolkit/Walkthrough/CCDWithDB.aspx

The walkthrough is written in C# however, so I’ll write a VB version of it pretty soon.Anyway, I’d like to thank Shawn once again. Very nice gesture.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


Always visible loading image

Loading image
In the new version of reBlogger due to come out some time this week, I’ve realized that I need some way to position update progress image so it’s always visible. Because, depending on how many keywords user enters in reBlogger, the page may become quite long and need scrolling, so having an update progress being fixed at one position was not an option. Basically, I wanted the little “loading…” animated gif to appear in the top left corner every time there was a asynchronous postback (via update panel).

So, here is the idea: I decided I’ll combine the atlas:UpdateProgress control and AtlasControlTookit AlwaysVisibleControlExtender. So the UpdateProgress control would make sure the animated gif is displayed only when there is a partial update (via UpdatePanel) and AlwaysVisibleControlExtender would make sure that, when displayed, animated gif is visible on top of everything in the top left corner of the screen.

This is how I’ve set up the code for displaying the animated gif :

OPEN CODE IN NEW WINDOW

You’ll notice that <asp:Panel surrounds the <atlas:UpdataProgress control. This is because, it is not possible to use AlwaysVisibleControlExtender directly on <atlas:UpdateProgress control. The UpdateProgress control itself is very simple. All you do is declare the ProgressTemplate, which will be displayed whenever there is a partial update.

The AlwaysVisibleControlExtender has several properties that I’ll explain here: TargetControlID is the id of the control that we are going to extend with this extender (in our case it’s the surrounding panel “pnlLoading”), VerticalSide can be top or bottom, allowing positioning this element on top or the bottom. Now, it would be really cool if we could set this to middle, but we can’t! The HorizontalSide property sets the element left or right. The VerticalOffset and HorizontallOffset properties set the margin between the end of screen and your element vertically and horizontally.

Last property is ScrollEffectDuration. Here I’ve 0.1 seconds, the larger this number is it will take longer time for our loading element to keep up with scrolling.

The whole project you can download from reBlogger lab.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


Tooltip on steroids


I know I’ve promised a little series on client side data binding, but here is one quick and dirty post just to break the monotony.

As I’ve been developing reBlogger for past year or so, many times I needed a quick and simple way to explain some of the features to the user. reBlogger is, what we beleive to be, a very unique application and here and there we simple need to provide users with some instructions to understand some of our revolutionary (I never claimed I’m humble!) concepts. We’ve tried using builtin tooltips (atl attribute) on images, but they are very limited (they only represent text and in some browsers the length of text is severely limited).

So, here is an atlas way of making your own tooltip and I will creatively call it : “tool tip on steroids” (I bet you haven’t heard that one before).

We’ll set up just a small form with two input fields, and two tooltips next to the textboxes. When user hovers over the image, our super tooltip will appear.

For the tooltip image we’ll use <asp:Image control, and the image should be something suggestive, like a question mark. Here is the complete code for the tooltip, because it’s very simple and I’ve wrote already about something similar:

OPEN CODE IN NEW WINDOW

So first we have the <asp:image control. Nothing special here. Next control is the <asp:panel control, which represents our tooltip. Feel free to go nuts here, whatever crazy HTML you put in there it’s ok. The last thing and the one actually making it all happen is Hover Menu Extender (part of AtlasControlToolkit).

Several things that we need to set up here : PopupControlID (the id of our tooltip, in our case the id of the <asp:panel control), TargetControlID (the id of our <asp:image control, in our case the little question mark gif). Basically we say, when user hovers over the TargetControl show PopupControl. There are two optional properties that we’ll set here. First is PopupPosition (I’ve put it right, so popup doesn’t display over the form) which determines at which side in respect to the TargetControl should PopupControl appear. Second property is OffsetX – I’ve set this to 20, which basically means that TargetControl and PopupControls should be 20px apart horizontally.

And that’s it.

You can download the whole project from reBlogger lab.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


How to get Atlas and AtlasControlToolkit controls in your toolbox?

VS tabs
Ok, perhaps there is a lot of you guys who read the book from the first page to the last page. I don’t. Therefore, more than often I miss all those great little tips and sometimes even fundamentals. So, for all of you like myself, who fastforward to the first working example in every programming book, this is a thing you may want to know.

Drag and drop toolbox controls for atlas (Visual Web Developer 2005)

1. Add a new tab to your toolbox (actually two of them, one for Atlas controls and one for AtlasControlToolkit)

To add a tab, click right mouse button under the tab named „General“ and press „Add tab“. The textbox will appear and there type the name of the tab (e.g. Atlas). Do the same thing for the controls for Atlas Control Toolkit.

2. Add controls to your tabs.

Under the new tabs you’ve added, you’ll see text „There are no usable controls in this group. Drag an item onto this text to add it to the toolbox“. Click with your right mouse button on that text, and press „Choose items…“. To add controls for Atlas press „Browse…“ and find the Microsoft.Web.Atlas.dll (from the folder where you have installed it). Then do the same for the AtlasControlToolkit, but then choose AtlasControlToolkit.dll instead.

Ok, very simple, very basic… but also very usefull.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”