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.
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.
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.
Sample code can be downloaded via here.