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:
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:
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?”
September 26, 2006 at 10:36 pm
Nice stuff! Thank you.
October 31, 2006 at 8:28 pm
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
February 23, 2007 at 9:08 pm
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.
March 1, 2007 at 5:57 am
fulltilt poker
Here fulltilt poker
March 2, 2007 at 8:14 pm
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.
May 10, 2009 at 8:48 am
[…] Sliding Task Lists project (day 5) — Reorder Lists and client side update panel refresh (Coding […]
July 5, 2011 at 10:07 am
I really like the ‘sliding tasks list’ project. You have covered in-depth details
Thanks for writing.
February 23, 2012 at 5:22 pm
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.
April 6, 2012 at 8:09 am
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: