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?”


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?”


ReorderList control

Reoder listIn past I have developed at least 2 or 3 javascript/asp.net controls that were more or less successfully representing a reorder list of items. So, user would be able to drag and drop items in the list and in doing so change their order. When I saw this control in the AtlasControlTooking I’ve became very excited and decided we’ll improve our keyword management page in reBlogger. Well… we probably will, but not just yet. ReorderList still does not work together with UpdatePanel, but seems like it will in the next CTP… Anyway, since I’ve spent half an hour playing with it I just may show you how it works without update panel.

I guess, the reason why page reloads after reordering was by design and not a mistake. To quote atlas.asp.net : “Rather than extending existing controls on the page, it delivers a rich client experience directly and still has a traditional post-back server model for interacting with the application.” I’ll spend some more time with this control in the near feature (namely trying to make nested reorder lists working), so I’ll be writing more about this.

So, to get this working you need to create a new website from “Atlas website” template. You know the drill by now. Create a datasource (I’ve used MS Access… just to make everything even more fun 🙂 ). The example you’ll see crudely resembles to the keywords table in reBlogger. Here is the code for datasource, though you’ll probably make your own. Any datasource will work. IMPORTANT! – if you are going to allow reordering, your datasource needs to have UpdateCommand enabled. Obviously, when ReorderList changes the vaues of the SortOrderField, UpdateCommand will come in handy :).

OPEN CODE IN NEW WINDOW

Next thing you will do is add the ReorderList control. There are 3 VERY IMPORTANT properties you need to set here (most of the forum questions about ReoderList I’ve stubled upon are due to the one of these 3 properties not being set).

1. DataKeyField – this is the primary key of your table. In my case, that was KeywordID
2. SortOrderField – this is the integer(!) field in your db table that holds the order of the items. Don’t forget to add this field in your database and to set this property
3. AllowReorder – hmmm… set this to true, or you’ll end up with just another static list 🙂

OPEN CODE IN NEW WINDOW

So that’s it. It works, but every time I’ve reordered the list page refreshed. I don’t like that. I’ve tried to put the ReoderList in an update panel, but as I’ve said, currently those two are not very nice to each other.

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?”


The accordion control (ACT)

 

AccordionFew months ago, when I was building the first version of reBlogger.com (it’s been slightly redesigned now), I had to cram 5 paragraphs of the text describing reBlogger and its features on the home page. After trying out different things, I’ve decided I’ll use the accordion style control and list only the paragraph titles, so when user clicks on any of these titles, the paragraph would appear. Back then, AtlasControlToolkit did not have Accordion control, so I had to do it by myself… javascript, css, 3 cups of coffee and one afternoon was what it took.

Now, I’ve just found out that in AtlasControlToolkit there is an accordion control. I decided I’ll give it a try and recreate the accordion I created back then. It took me altogether some 15 minutes and the end result is way simpler, easier to modify and well, faster then the one I’ve built. So here is how it works.

First thing I’ve done was to create a new web site from “Atlas Template” in Visual Web Developer.

Then I’ve created the Accordion Control, part of the Atlas Control Toolkit. The accordion control serves as a container for the AccordionPanes, which each hold a certain paragraph in my example.

OPEN CODE IN NEW WINDOW

You will notice here, some of the peculiar properties, so let me explain them. SelectedIndex property sets which pane will be displayed first. If it’s 0, then the first one will be displayed, 1 would show the second pane etc. (0 based index). The panes are indexed in the way you’ve inserted them. AutoSize property indicates how will accordion control size. If set to “none”, the accordion will grow or shrink with no restrictions at all, if you set it to “limit”, the accordion will never grow larger than the height you specified (the scrollbar will appear), and lastly you can set it to “fill”. When set to “fill”, accordion will always have the exact size as the height you’ve specified. Content will be shrunk or expanded to match the height of the accordion. HeaderCssClass and ContentCssClass respectively set the css class for the header and content templates of each “AccordionPane” (open the next code example, to see how AccordionPane control looks like). FadeTransition can be set to true or false, indicating whether “AccordionPane” will just disappear when new pane is opened, or will it fade out. Lastly, “FramesPerSecond” property determines how fast will accordion panes switch. The higher this number is, faster will panes switch.

Next, and surprisingly the last step was to insert inbetween the opening and closing tags of the accordion control, any number of accordion panes I wanted (I inserted 6 panes, one for each paragraph).

OPEN CODE IN NEW WINDOW

There are really only two things to explain here. The header part holds the content you want to be in the header (duuuh…), in my case this will be the title of the paragraph. The content part contains… hold your breath now… the content of that pane. In my case this is the actual paragraph. And that’s it.

You can download the whole project from our reBlogger lab.


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


Prevent users from doing stupid things. Like setting their computer on fire. Fire… mmmmm.

Don't play with matches!Ok, not that you will provide your application with features like setting someone’s computer on fire, but lot’s of time you may need to provide those buttons titled „clear all“, „remove all“, „delete everything“. Making sure that’s what user really wants to do can save a lot of time and anger to your users. For ages, windows based applications had these „are you really sure…“ modal pop ups. However, to do that with asp.net was traditionally a bit of a problem. You would usually need to implement javascript and then make client side script communicate with the server side.

Luckily, this is really, really simple now. All you need to use is ConfirmButtonExtender that comes with Atlas Control Toolkit. So here is what you do. You make you application, just as you would do normally. You have a button that will do something when clicked. The only difference is now that you add a new control, namely, ConfirmButtonExtender. This control has two properties : TargetControlID (the ID of the button which does the operation that will be confirmed) and ConfirmText (the message that you want to ask your user, something like “are you really sure you want to do this”). Here is the code :

OPEN CODE IN NEW WINDOW

The whole project you can download here from reBlogger lab.


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