Paging in a DataList or Repeater control

Introduction
DataList is a data bound list control that displays items using certain templates defined at the design time. The content of the DataList control is manipulated by using templates sections such as AlternatingItemTemplate, EditItemTemplate, FooterTemplate, HeaderTemplate, ItemTemplate, SelectedItemTemplate and SeparatorTemplate. Each of these sections has its own characteristics to be defined but at a very minimum, the ItemTemplate needs to be defined to display the items in the DataList control. Other sections can be used to provide additional look and feel to the DataList control.

PagedDataSource, is a class that encapsulates the paging related properties for data-bound controls such as DataGrid, GridView, DataList, DetailsView and FormView that allow it to perform paging. And this article is going to combine both DataList control and PagedDataSource class to explain dynamic or custom paging methods for Asp.Net developers.


For demonstration, we are going to list out all the countries in the Country Table. We are going to create a dynamic paging control for this list and define the page size at run-time from a DropDownList control and enrich the navigation with Next and Previous buttons.

Do the Basics Right

Since everything comes with Ajax, create an Ajax Enabled Website, in your Visual Studio 2005. In your Default.aspx page, drag and drop a DataList control from the Toolbox, named it as dlCountry. Our country Table contains two fields such as Country_Code And Country_Name. Right click on the dlCountry datalist, choose Edit Templates > Item Template. Add two Label controls into it; bind its Text property to Country_Code and Country_Name respectively.









Now switch to the Code-behind Default.aspx.cs, write a method to fetch data from the Country’s table.

private void BindGrid()
{
string sql = "Select * from Country Order By Country_Name";
SqlDataAdapter da = new SqlDataAdapter(sql, “Yourconnectionstring”);
DataTable dt = new DataTable();
da.Fill(dt);

dlCountry.DataSource = dt;
dlCountry.DataBind();
}


The above BindGrid method, fetches data from the Country table, bind it with the dlCountry datalist. So the dlCountry datalist is ready to display the records available in the Country table. Call this BindGrid method in the Page load event.

Click Here
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGrid();
}
}


Save everything you have done and press F5. You can see the browser opening this page and dispalys all the records in the country table. No paging available at this level.
Let us focus On Paging


To create dynamic paging, we are going to use PagedDataSource Class along with another DataList control. Drag and drop the second DataList control into the page, name it as dlPaging. In its ItemTemplates section, add a LinkButton name it as lnkbtnPaging. Set its CommandName property as lnkbtnPaging. Then choose End Template Editing. Drag and drop a DropdownList Control, name it as ddlPageSize, add values such as 10, 20 and 30 or something as you wish. Then add two more LinkButton controls. Name it as lnkbtnPrevious and lnkbtnNext and change its Text property as Previous and Next respectively. Place both the Previous and Next link buttons on both sides of the dlPaging datalist. Better I suggest you to put an Html Table control and place these controls in it properly so that it will look nicely aligned.


Now we will work little bit on the code-behind of the Default.aspx. Declare a PagedDataSource object at page scope.


PagedDataSource pds = new PagedDataSource();


Then declare a public property called CurrentPage to maintain the latest selected page index. Selected page index is stored in a ViewState variable. The default value of the ViewState is 0.


public int CurrentPage
{

get
{
if (this.ViewState["CurrentPage"] == null)
return 0;
else
return Convert.ToInt16(this.ViewState["CurrentPage"].ToString());
}

set
{
this.ViewState["CurrentPage"] = value;
}

}


Next write a method ‘doPaging’ to create a list of page numbers. The total number of pages can be taken from the PagedDataSource object’s PageCount property. We create a DataTable from the information obtained from the PagedDataSource object and assign the DataTable to the dlPaging datalist.
private void doPaging()
{
DataTable dt = new DataTable();
dt.Columns.Add("PageIndex");
dt.Columns.Add("PageText");
for (int i = 0; i < pds.PageCount; i++)
{
DataRow dr = dt.NewRow();
dr[0] = i;
dr[1] = i + 1;
dt.Rows.Add(dr);
}

dlPaging.DataSource = dt;
dlPaging.DataBind();
}

Look closely, at the doPaging method. Notice the two columns such as PageIndex and PageText. Even though it is understandable, PageIndex is the selected index value of the pages while PageText is the display value in the dlPaging Now we have to bind PageIndex and PageText into the dlPaging’s lnkbtnPaging link button. So set the CommandArgument and Text property of the lnkbtnPaging to PageIndex and PageText respectively. So the entire dlPaging datalist control’s Html source code will look like follows.







Modify BindGrid Method

The next step is to combine both the Country listing datalist and paging number datalist controls. To start this, we are going to modify the BindGrid() method slightly.


private void BindGrid()
{
string sql = "Select * from Country Order By Country_Name";
SqlDataAdapter da = new SqlDataAdapter(sql, “Yourconnectionstring”);
DataTable dt = new DataTable();
da.Fill(dt);

pds.DataSource = dt.DefaultView;
pds.AllowPaging = true;
pds.PageSize = Convert.ToInt16(ddlPageSize.SelectedValue);
pds.CurrentPageIndex = CurrentPage;
lnkbtnNext.Enabled = !pds.IsLastPage;
lnkbtnPrevious.Enabled = !pds.IsFirstPage;

dlCountry.DataSource = pds;
dlCountry.DataBind();

doPaging();
}


In the above method, as usual we fetch data from the Country table and filled it in a DataTable. Then we assign it to the DataSource of the PagedDataSource object pds. Set its AllowPaging property to true and its PageSize with the value from the ddlPageSize DropDownList control. CurrentPageIndex is assigned with our pre-defined property CurrentPage. When the page index reaches first and last page, our Previous and Next button should be disabled. So in the next two lines we check the pds whether it reaches Last or First page, accordingly we set their Enabled property. Now everything is ready to assign the pds to our Country Listing DataList. Last but not least, we are calling the doPaging method to create page numbers.




Paging Events

In the ItemCommand event of the dlPaging control, write code for the paging to take place. Here we take the PageIndex value from the CommandArgument of the lnkbtnPaging and assign it to the CurrentPage property. On every event, we call the BindGrid method.


protected void dlPaging_ItemCommand(object source, DataListCommandEventArgs e)
{
if (e.CommandName.Equals("lnkbtnPaging"))
{
CurrentPage = Convert.ToInt16(e.CommandArgument.ToString());
BindGrid();
}
}

Previous And Next Button Events


In the Click events of the lnkbtnPrevious and lnkbtnNext, write a line of code that decrease and increase the value of CurrentPage property.


protected void lnkbtnPrevious_Click(object sender, EventArgs e)
{
CurrentPage -= 1;
BindGrid();
}

protected void lnkbtnNext_Click(object sender, EventArgs e)
{
CurrentPage += 1;
BindGrid();
}


Change PageSize Dynamically


To change the PageSize of the PagedDataSource dynamically, we have to call the BindGrid method again because we have already assign the value of the ddlPageSize to the PageSize property of the PagedDataSource.
protected void ddlPageSize_SelectedIndexChanged(object sender, EventArgs e)
{
CurrentPage = 0;
BindGrid();
}

HighLight Selected Page Numbers

To inform the user about the selected page, we have to highlight the Page Number in different style. This can be achived by using the following code in ItemDataBound event of the dlPaging datalist.


protected void dlPaging_ItemDataBound(object sender, DataListItemEventArgs e)
{
LinkButton lnkbtnPage = (LinkButton)e.Item.FindControl("lnkbtnPaging");
if (lnkbtnPage.CommandArgument.ToString() == CurrentPage.ToString())
{
lnkbtnPage.Enabled = false;
lnkbtnPage.Font.Bold = true;
}
}


That’s it. Save everything and hit F5. You can see first DataList will display first 10 Records from the Country Table. The dlPaging control will populate the list of page numbers. Previous button will be in disabled state while Next button is active. Click on any page number, Page will navigate for the Page you choosed. Try by clicking Next and Previous buttons, then Change the ddlPageSize value.

To enable Ajax to this page, add the ScriptManager and include all the control inside an UpdatePanel. Its done.