Reflections on Software Development

Introduction

I have been following Matt’s jQuery related posts, and trying to get myself familiar with this new library. While searching for tutorials about it, I accidentally found this great blog. Accident followed by another accident, I figured out that one of their JavaScript posts can be applicable to the ListView control in order to create a “drag and drop” based manual sorting within the items of the ListView.

• I strongly suggest reading the original post first before passing to the rest of this post.

Implementing The Original Post…

As a data source, I just grabbed the XML file that I used before in here, and simplified it.

Here is the CSS implementation of the original post into my sample ASPX page:

And then, I created the DIVs programmatically by using a ListView as in the following:

If you look at the JavaScript.js file that I used in my sample code, you will see that the load function has been commented since I needed to create the “dragObject” objects dynamically in that function:

As a result of this, I organized the Page_Load event as:

Download

You can download the sample application via here.

I have recently figured out that if there is a scrollbar’ed Panel control inside an UpdatePanel, it looses its scrollbar position after any type of partial postback within that UpdatePanel. There can be a GridView, a DIV container or another similar control instead of this Panel.

I have searched and found some workarounds at ASP.NET forums, and this specific one was the easiest one to implement into every situation in order to gain back the position of scrollbar. I enhanced it a bit by handling null cases and using the ClientID property. Here is the result:

Update

You can read the “Reusable JavaScript Component” version of this post in here. Thanks Matt!