Personal Blog of Mustafa Basgun

Disable UpdatePanel’ed ListView with CSS and JavaScript While Sorting

with one comment

When a ListView, or GridView as well, allows sorting and is inside an UpdatePanel, it always bothers me that any of the sorting links in the header row are still clickable even though the initiated sorting progress is not being completed. Most of the time this situation may yield an error if the ListView is dealing with many records since everything happens inside an UpdatePanel asynchronously. As there are some other possible ways to beat this, here is my solution by utilizing a transparent image to cover up the ListView while it is being sorted.

• This link about CSS image transparency and opacity would be a good reading before jumping into the solution.

• I will be extending one of my former sample codes that I created here.

Solution

Instead of creating large volume of data for the sample code, I will just simulate 5 seconds sleeping inside the sorting event of ListView1:

Then, I will create the DIV which holds the image that will be made transparent via CSS at a later time and place ListView1 inside an UpdatePanel to have asynchronous postbacks:

Final nested code view with a global DIV named as “ListViewGlobalDIV” should be similar to the following:

I will make the “transparent.gif” transparent by using the following CSS code:

(“transparent.gif” is just a plain gray image having the approximate width and height of ListView1.)

This way of creating transparent images is not a CSS standard yet, but it works well in most of the modern browsers.

Notice the usage of absolute positioning in order to overlap TempTransparentDIV and UpdatePanel1.

Finally, time to write the JavaScript part:

If the JavaScript code refers to any objects from the ASP.NET AJAX Library, then it should be placed after the library has been loaded. Therefore, putting the above script to the end of the page would be a good practice since ScriptManager1 loads the library in this sample code.

As a result…

When you sort ListView1, it will be covered by “transparent.gif” with an 40% opacity and cursor will show the sandclock. All links would be unclickable till the sorting progresses are completed each time.

Download

Sample code can be downloaded via here.

Advertisements

Written by Mustafa Basgun

March 14, 2008 at 9:00 AM

One Response

Subscribe to comments with RSS.

  1. […] bmains wrote an interesting post today onHere’s a quick excerptWhen a ListView, or GridView as well, allows sorting and is inside an UpdatePanel, it always bothers me that any of the sorting links in the header row are still clickable even though the initiated sorting progress is not being … […]


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

%d bloggers like this: