Using the DataPager with a ListView

Learning Resources
 

Using the DataPager with a ListView


ASP. NET 3.5 introduced two new data bound controls ListView & DataPager . ListView Web server control enables us to display  the data from a data source and if a DataPager is attached then it enables paging in the  ListView.

ListView is a data bound control similar to DataList and DataRepeater controls but it provides  edit, insert, and delete  , sort operations on the  data that it bounded  like a GridView control. Unlike GridView control ListView gives the user full control over the rendering of the page. using templates and styles(CSS) the user can generate clean HTML UI according to his needs.

DataPager Web control  is used to page data and  display navigation controls for data-bound controls that implement the IPageableItemContainer interface.ListView implements the IPageableItemContainer and will use DataPager to support Paging.

Binding ListView to a DataSource.
We can use any ASP.NET datasource control  to bind to the ListView control by setting the DataSourceID property of the ListView control to the name of the Datasource control.

This sample is using AccessDataSource  control to bind to the ListView control.

DataKeyNames="id" onitemcommand="ItemUpdate" >

ListView provides built in support for sort functionality. It has a sort event, which can be specified by setting the commandName property of the control, which is part of the ListView control to the 'Sort'. The Sort event supports command argument which can be used to identify which control raised the sort event. The handler for sort event is registered by setting the OnSorting property of the ListView to the handler name.

Specifying the Sort Event on the control's

Handling the raised sort event
protected void ListView1Sorting(Object sender, ListViewSortEventArgs e)
{
    String strImage;
    if (e.SortDirection == SortDirection.Ascending)
        strImage = "asc.gif";
    else
        strImage = "desc.gif";
    Image sortSender = (Image)ListView1.FindControl("Image1");
    Image sortSubject = (Image)ListView1.FindControl("Image2");
    Image sortRecdate = (Image)ListView1.FindControl("Image3");
    Image sortBody = (Image)ListView1.FindControl("Image4");
 
    if (e.SortExpression == "From")
    {
        sortSender.ImageUrl = strImage;
        sortSender.Visible = true;
        sortSubject.Visible = false;
        sortRecdate.Visible = false;
        sortBody.Visible = false;
    }
    else if (e.SortExpression == "Subject")
    {
        sortSubject.ImageUrl = strImage;
        sortSender.Visible = false;
        sortSubject.Visible = true;
        sortRecdate.Visible = false;
        sortBody.Visible = false;
    }
    else if (e.SortExpression == "recdate")
    {
        sortBody.ImageUrl = strImage;
        sortSender.Visible = false;
        sortSubject.Visible = false;
        sortRecdate.Visible = true;
        sortBody.Visible = false;
    }
    else if (e.SortExpression == "Body")
    {
        sortBody.ImageUrl = strImage;
        sortSender.Visible = false;
        sortSubject.Visible = false;
        sortRecdate.Visible = false;
        sortBody.Visible = true;
    }
    else
    {
 
        sortSender.Visible = false;
        sortSubject.Visible = false;
        sortRecdate.Visible = false;
        sortBody.Visible = false;
    }
}

Specifying ListView Templates
ListView provides various templates which we can use to display the data. The templates are:

- LayoutTemplate
- ItemTemplate
- ItemSeparatorTemplate
- GroupTemplate
- GroupSeparatorTemplate
- EmptyItemTemplate
- EmptyDataTemplate
- SelectedItemTemplate
- AlternatingItemTemplate
- EditItemTemplate
- InsertItemTemplate

The main layout of a ListView control is created by defining a LayoutTemplate. The LayoutTemplate will include controls that acts as a placeholder for the data like Table, Panel, Label or HTML controls like table, div, or span elements that have a runat attribute set to "server".
Item template is the main template which will show the data bounded to the ListView in a repeated manner. This template typically contains controls that are data-bound to data columns or other individual data elements. These two templates are mandatory.

GroupTemplate will be used to group the items. The EditItemtemplate, SelectedItemTemplate, InsertItemTemplate are shown at that particular operation like insert, edit, select. ItemSeparatorTemplate, GroupSeparatorTemplate are used to separate the individual items and group Items Separately.

We will use each template to embed the necessary HTML controls like table, tr, td, div, span or server controls to display the UI according to our needs.

The following example shows the basic structure of a ListView with mandatory templates...

    DataSourceID="SqlDataSource1">
 
   


     
   

 
 
   
        <%-- Data-bound content. --%>
                  Text='<%#Eval("Name") %>' />
     
   
 



An item placeholder must be specified on ListView. It will be specified in LayoutTemplate or GroupTemplate.

In order to specify a item placeholder set a control's ID property to "itemPlaceholder". The item placeholder control must also specify runat="server". If you want to provide a different ID, you can specify it using the ItemPlaceholderID attribute of the ListView control.

If Grouping is used, GroupTemplate will act as place holder for ItemTemplate. In this case a Groupplaceholder must be specified in ListView. An Groupplaceholder can be specified in LayoutTemplate by setting a control's ID property to "groupPlaceholder" or setting the GroupPlaceholderID attribute of the ListView control to a control which is specified in LayoutTemplate.

Example code for setting ID properties of control's to "itemPlaceholder", "groupPlaceholder"

    DataSourceID="SqlDataSource1"
    GroupItemCount="5">
 
   


     
     
   

 
 
   
     
   
 

 
   
      <%-- Data-bound content. --%>
                Text='<%#Eval("Name") %>' />
   
 

Example code for setting itemPlaceholderID, groupPlaceholderID properties to control's ID's.

    DataSourceID="SqlDataSource1"
    GroupItemCount="5" GroupPlaceholderID="Placeholder1" ItemPlaceholderID="Placeholder2">
 
   


     
     
   

 
 
   
     
   
 

 
   
      <%-- Data-bound content. --%>
                Text='<%#Eval("Name") %>' />
   
 

Preparing the LayoutTemplate for the Email Viewer
We need to create the LayoutTemplate as shown below using the necessary HTML controls like table, tr, td (with styles) for formatting and the ASP.Net Server Controls (Buttons, LinkButtons, DataPager) for displaying the Headers as well as footers. We need to use a itemplaceholder for displaying the items from data source.



 















 


 
 


 














Action







Text="CheckMail" OnClick="ClearSorting" />
OnClick="ShowInsert" Visible="true" /> CausesValidation="false" Text="Send" OnClick="HideInsert" Visible="false" />
 
 



ShowFirstPageButton="true"
ShowPreviousPageButton="true"
ShowLastPageButton="true"
ShowNextPageButton ="true"/>



showing
Text="<%# Container.StartRowIndex %>" />
to
Text="<%# Container.StartRowIndex+Container.PageSize %>" />
( of
Text="<%# Container.TotalRowCount%>" />
records)





 



Preparing DataPager
The DataPager control is used to page data and to display navigation controls for data-bound controls that implement the IPageableItemContainer interface.

A DataPager control can be associated to the data-bound control by using the PagedControlID property. Alternatively, the DataPager control can be placed inside the data-bound control hierarchy.

DataPager control will display navigation controls by adding the pager fields to the control. DataPager supports following types of pager fields.

NextPreviousPagerField: Enables to navigate through pages one page at a time, or to jump to the first or last page. It shows first, prev, next, last buttons. The button type may be of Button, Image, LinkButton.

NumericPagerField: enables to navigate through pages by displaying page numbers on the datapager.

TemplatePagerField: we can create custom UI by using TemplatePagerField. We can use Labels, buttons, images to create custom UI as well as programmatic control of the DataPager.

In order to create the DataPager according to the above image we need to use NumericPagerField as well as TemplatePagerField as part of the DataPager Fields. We can use DataPager control's properties like PageSize, TotalRowCount, StartRowIndex to create the TemplatePagerField.

PageSize gives the no of the pages currently displayed in DataPager.

TotalRowCount is the no of rows presented in the datasource attached to the DataPager.

StartRowIndex is the current first row's index in the data source .



ShowFirstPageButton="true"
ShowPreviousPageButton="true"
ShowLastPageButton="true"
ShowNextPageButton ="true"/>



showing
Text="<%# Container.StartRowIndex %>" />
to
Text="<%# Container.StartRowIndex+Container.PageSize %>" />
( of
Text="<%# Container.TotalRowCount%>" />
records)





 

Preparing ItemTemplate & Alternative ItemTemplate
We need to embed the necessary HTML tags as well as Server controls like checkboxes, labels, buttons in order to get the following look for the ItemTemplates as well as AlternativeItemTemplates. The data will be bounded to the properties of the control's by using inline ASP.Net code <%#Eval("datafieldname")%>, where datafiledname is the column name in the datasoure.


onmouseover="this.style.backgroundColor='#FFCCFF'" onmouseout="this.style.backgroundColor='#FFFFFF'">



<%#Eval("From")%>

<%#Eval("Subject")%>

<%#Eval("recdate")%>

<%#Eval("Body")%>



Preparing EditItemTemplate & InsertItemTemplate
Similarly we can create EditItemTemplate as well as InsertItemTemplate, but instead of labels we will use TextBoxes like below.



























 

 For Support