Yet Another Blog on ASP.NET and Some Other Stuff

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.

DataPager is one of the new controls in ASP.NET 3.5, and it provides paging functionality for data-bound controls that implement the IPageableItemContainer interface, which is only the ListView control for the time being.

By default, DataPager has two commonly used paging styles:

• Numeric Pager via NumericPagerField

• Next and Previous Pager via NextPreviousPagerField

To get an idea about how to implement these basic common styles, you can read this post.

This post will explain how to enhance the paging experience in a ListView by using both a NextPreviousPagerField and a DropDownList which will enable users to select the page size of ListView. This page size is actually the PageSize property of the DataPager, and this property defines the number of records that are displayed for each page of ListView.

To avoid complexity, the following simple XML file (Contacts.xml) will be used as a data source:

And, the XMLDataSource that consumes this XML file is:

“xdsDemo” is the DataSourceID of the ListView “lvDemo”:

After getting this data binding done, LayoutTemplate of “lvDemo” should be similar to the following:

Even though it is not completely related with the topic and emphasis of this post, ItemTemplate and AltenatingItemTemplate templates of “lvDemo” are:

Finally, here is the code that sets DropDownList (ddlDemo) and DataPager (dpDemo):

As a conclusion of all these things, the result on the browser should be like:

Download

Sample code for this demo application can be downloaded via here.

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.

I really like the flexibility of data presentation with the ListView, and that is the reason why I have been posting about it so much lately. This post is actually a short tip about how to display long texts inside the ListView, which can be easily implemented to the GridView and Repeater controls as well.

I have created a sample Access database with a table named as “QAs” having ID, Question and Answer fields in it. You can find this database file in the download.

Let’s assume that this table is wanted to displayed as:

Then, Answer data should be placed in a Panel control with a fixed Height and Width values in both ItemTemplate and AlternatingItemTemplate templates:

Download

Sample code for this short tip is available in here.

I have used and been using OnClick events and tooltips over the GridView control so many times in my 2.0 based projects. I believe it is a good practice for the usability of the presentation layer. I thought it may also be a good feature to add them to the ListView control as well.

Firstly

In order to have a more beautiful tooltip and have some flexibility about its presentation, I found a very good JavaScript resource on the web and applied it directly to my code. Take a look at that one first.

• I will be using the same ListView scenario and the Access database that I used before in this post.

Solution

As I use OnRowDataBound method in GridView for the purpose, I decided to use the OnItemDataBound method in ListView. After assigning this method’s value to “CountryListBound”, here is code part:

whereas trIT controls are:

For the Tooltip object, I designed its CSS class as:

After application file is debugged, browser shows the following screens:

• When cursor is mouse over’ed

• When the item (actually row) with ID of 10 is OnClick’ed:

Download

Sample source code can be downloaded via here.