|
Total Views :
40271 |
|
Adding to your Favorites....
|
|
|
 |
|
|
|
|
|
|
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.
|
<asp:DataList ID=" dlCountry" runat="server">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Country_Code")
%>'></asp:Label>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Country_Name")
%>'></asp:Label>
</ItemTemplate>
</asp:DataList> |
|
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.
|
|
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.
|
<asp:DataList ID=" dlPaging" runat="server" OnItemCommand="dlPaging _ItemCommand">
<ItemTemplate>
<asp:LinkButton ID="lnkbtnPaging" runat="server" CommandArgument='<%#
Eval("PageIndex") %>' CommandName="lnkbtnPaging" Text='<%# Eval("PageText")
%>'></asp:LinkButton>
</ItemTemplate>
</asp:DataList> |
|
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.
Finally, this article is just a sample for tutorial purpose. You can customize the
paging as you like using the above technique.
|
|
Click here to view our DataList Paging Demo Page |
|
|
|
|
|
|
|
|
|
|