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

---