Sliding Task Lists project (day 5) – Reorder Lists and client side update panel refresh

Yesterday, I have added the ability to save new tasks without postbacks to database. Today, I’m going to bring the lists to life. So far, you could have notice that lists with the tasks were simple html lists (mock up functionality), however today I’ll convert those lists to atlas control toolkit ReorderList control, because I want to allow user to order the tasks in list by the priority.

I will explain the code only for the first list („Big Tasks“) since the rest of the code (for other lists) is pretty much same. So, here is how the code for Big Tasks list looks now:

OPEN CODE IN NEW WINDOW

You notice that I’ve wrapped the whole code in UpdatePanel. This is so because I want to refresh this list when user adds new task (NOTE: If you don’t intend to allow users to add new items or edit existing items, you don’t need Update Panel. Reordering works well without it as well).

I’ve already written the post on ReorderList (you can read it here), so I won’t repeat myself. However, this time I’m using SqlDataSource, and in that data source I make sure that only the big, uncompleted tasks for the currently logged in user are pulled out. The update command simply changes the priority (hmm… I must admit I’m not sure do I need this update command here… maybe it would work without it as well?!).

Anyway, I’ve made a textbox where I put the user name when page loads so I can use it here in this select statement (in case you wonder what is ‘txtUserName’).

The last thing I have in this update panel is the hidden link button. I use this so that I can call the click event on it from javascript and in doing so refresh the update panel. Now, you may wonder why I haven’t simply added trigger for control event and hook it up to the save button in ModalPopup. I’ve tried, but it doesn’t work. Seems like this button is losing it’s ability to do postbacks when inside of the ModalPopup. I’m not really sure on why is this not working, but for the time being, I’ll just let it be at that. I’m sure there is some theoretical explanation for this, but I thought a little mystery could bring some more readers :) … hmmm maybe some violence would help as well… ok, back to atlas.

The change in javascript file (tasks.js) is following:

OPEN CODE IN NEW WINDOW

You’ll notice that in AddBigTask_Callback function, just before I tell user that “new big task has been added”, I call __doPostBack(‘lnkRefreshBigTasks’,’’). This is the very same function that would be called if that hidden link button inside of the update panel would be clicked. I’m pretty sure this is not the best / intended way to refresh the update panel from javascript, since it is obviously looks like a hack. However, up to now, I have not found a more appropriate method of doing this.

Tomorrow, I’ll be polishing the application… styling the look and feel, adding update progress images and making sure it works in IE and FF as well.

The working version of STL can be found here : www.reblogger.com/lab/STL


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


About these ads

9 Responses to “Sliding Task Lists project (day 5) – Reorder Lists and client side update panel refresh”

  1. Garbin Says:

    Nice stuff! Thank you.

  2. Walter Says:

    Hi,

    I’ve really enjoyed the ‘sliding tasks list’ project so far. I like the in-depth, ‘take nothing for granted’ style of writing. Thanks.

    Keep up the great work.

    When can we expect to see the next installment?

    Kind Regards

  3. Ric Castagna Says:

    Have you had a chance to make any progress on nested ReorderLists?

    I’m starting to tackle this idea and was hoping for some words of wisdom on getting started.

  4. fulltilt poker Says:

    fulltilt poker

    Here fulltilt poker

  5. Armando Andrade Says:

    Hi there, nice blog. I’ve tried to input some javascript into the task, and this is what i receive

    Assertion Failed: unrecognized tag atlascontroltoolkit:dropWatcherBehavior

    It would be nice to add some kind of validation for html and scripting.

  6. Useful AJAX Links | pc-aras Says:

    [...] Sliding Task Lists project (day 5) — Reorder Lists and client side update panel refresh (Coding [...]

  7. Zeeshan Umar Says:

    I really like the ‘sliding tasks list’ project. You have covered in-depth details

    Thanks for writing.

  8. Balkan Pharma Says:

    Great information… thanks for you review and tutorial about how to comment.
    I think if we walk to other blog we most comment to give appreciate for owner.

  9. Steroids Pharmacy Says:

    I will explain the code only for the first list („Big Tasks“) since the rest of the code (for other lists) is pretty much same. So, here is how the code for Big Tasks list looks now:


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: