Sometimes you need custom paging and sorting of a Gridview. So I wanted to share the ASP.NET code for all.
Write this code on Client Side (Aspx File)
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager>
<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
<ContentTemplate>
<asp:GridView ID=”grdList” runat=”server” CellPadding=”2″ CellSpacing=”0″ BorderWidth=”0px”
AutoGenerateColumns=”False” GridLines=”None”
OnPageIndexChanging=”grdList_PageIndexChanging” Width=”100%”
CssClass=”listing-table” AllowSorting=”true” AllowPaging=”true”
PageSize=”3″ ShowFooter=”True” onrowcreated=”grdList_RowCreated” >
<Columns>
<asp:BoundField DataField=”Title” HeaderText=”Name” SortExpression=”Name” />
<asp:BoundField DataField=”Class” HeaderText=”Class” SortExpression=”Class” />
<asp:BoundField DataField=”RollNo” HeaderText=”RollNo” SortExpression=”RollNo” />
</Columns>
<PagerTemplate>
<div>
<div id=”pagn”>
Goto Page
<asp:DropDownList ID=”ddlPageSelector” runat=”server” AutoPostBack=”true”>
</asp:DropDownList>
of
<%=grdList.PageCount%>
<asp:Label ID=”lblNumber” runat=”server”></asp:Label>
<span>
<asp:Button Text=”First” CommandName=”Page” CommandArgument=”First” runat=”server”
ID=”btnFirst” />
<asp:Button Text=”Previous” CommandName=”Page” CommandArgument=”Prev” runat=”server”
ID=”btnPrevious” />
</span>
<%– <span>|</span>–%>
<%–<span>|</span>–%>
<span>
<asp:Button Text=”Next” CommandName=”Page” CommandArgument=”Next” runat=”server”
ID=”btnNext” />
<asp:Button Text=”Last” CommandName=”Page” CommandArgument=”Last” runat=”server”
ID=”btnLast” />
<div style=”float: right;padding-right:15px”>
Record Per Page:
<asp:TextBox ID=”txtPageSize” runat=”server” Width=”25px” EnableViewState=”true”></asp:TextBox>
<asp:LinkButton ID=”lnkSavePageSize” runat=”server” ValidationGroup=”grpList” OnClick=”lnkSavePageSize_Click”><strong>Save</strong></asp:LinkButton>
</div>
</span>
</div>
</div>
<asp:CompareValidator ValidationGroup=”grpList” Display=”None” ID=”CompareValidator1″
ControlToValidate=”txtPageSize” Type=”Integer” Operator=”DataTypeCheck” runat=”server”
ErrorMessage=”Enter numeric value.”></asp:CompareValidator>
<asp:ValidationSummary ValidationGroup=”grpList” ShowSummary=”false” ShowMessageBox=”true”
ID=”ValidationSummary1″ runat=”server” />
</PagerTemplate>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Write This Code on CodeBehid (.vb File)
private void BindData()
{
grdList.DataSource = (Pass Dataset or datatable Here)
grdList.DataBind();
}
protected void grdList_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
grdList.PageIndex = e.NewPageIndex;
BindData();
}
protected void grdList_Sorting(object sender, GridViewSortEventArgs e)
{
string sortExpression = e.SortExpression;
ViewState["SortExpression"] = sortExpression;
if (GridViewSortDirection == SortDirection.Ascending)
{
GridViewSortDirection = SortDirection.Descending;
SortGridView(sortExpression, “DESC”);
}
else
{
GridViewSortDirection = SortDirection.Ascending;
SortGridView(sortExpression, “ASC”);
}
}
private SortDirection GridViewSortDirection
{
get
{
if (ViewState["sortDirection"] == null)
ViewState["sortDirection"] = SortDirection.Ascending;
return (SortDirection)ViewState["sortDirection"];
}
set { ViewState["sortDirection"] = value; }
}
private void SortGridView(string sortExpression, string direction)
{
DataTable dataTable = new DataTable();
dataTable = getData();
DataView dv = new DataView();
dv = dataTable.DefaultView;
dv.Sort = sortExpression + ” ” + direction;
grdList.DataSource = dv;
grdList.DataBind();
}
protected void grdList_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Pager)
{
SetPagerButtonStates(grdList, e.Row, this);
}
}
public void SetPagerButtonStates(GridView gridView, GridViewRow gvPagerRow, Page page)
{
int pageIndex = gridView.PageIndex;
int pageCount = gridView.PageCount;
Button btnFirst = (Button)gvPagerRow.FindControl(“btnFirst”);
Button btnPrevious = (Button)gvPagerRow.FindControl(“btnPrevious”);
Button btnNext = (Button)gvPagerRow.FindControl(“btnNext”);
Button btnLast = (Button)gvPagerRow.FindControl(“btnLast”);
TextBox txtPageSize = (TextBox)gvPagerRow.FindControl(“txtPageSize”);
btnFirst.Enabled = btnPrevious.Enabled = (pageIndex != 0);
btnNext.Enabled = btnLast.Enabled = (pageIndex < (pageCount – 1));
DropDownList ddlPageSelector = (DropDownList)gvPagerRow.FindControl(“ddlPageSelector”);
ddlPageSelector.Items.Clear();
for (int i = 1; i <= gridView.PageCount; i++)
{
ddlPageSelector.Items.Add(i.ToString());
}
ddlPageSelector.SelectedIndex = pageIndex;
txtPageSize.Text = gridView.PageSize.ToString();
//Anonymous method (see another way to do this at the bottom)
ddlPageSelector.SelectedIndexChanged += delegate
{
grdList.PageIndex = ddlPageSelector.SelectedIndex;
BindData();
};
//for vb.net( VB.net 2.0 does not support anonymous methods)
//protected void ddlPageSelector_SelectedIndexChanged(object sender, EventArgs e)
//{
//GridView1.PageIndex = ((DropDownList)sender).SelectedIndex;
//GridView1.DataBind();
//}
}
protected void lnkSavePageSize_Click(object sender, EventArgs e)
{
GridViewRow pagerRow = grdList.BottomPagerRow;
TextBox temp1 = (TextBox)pagerRow.FindControl(“txtPageSize”);
if (temp1.Text != “”)
{
grdList.PageSize = Convert.ToInt32(temp1.Text);
}
}
CSS File For Styling
div.header {
border-top: 1px solid #d0eaf8;
border-bottom: 1px solid #d0eaf8;
width: 100%;
margin: 4px 0;
}
div.resultCount {
width: 29%;
}
div.pagn {
text-align: left;
width: 100%;
}
div.pagnBtm {
text-align: center;
width: 100%;
}
div.pagn .pagnCur, div.pagnBtm .pagnCur
{
font-weight: bold;
padding: 0 5px;
}
div.pagn .pagnDisabled, div.pagnBtm .pagnDisabled {
color: #999;
padding: 0px 5px;
white-space: nowrap;
}
div.pagn .pagnMore, div.pagn .pagnSep, div.pagnBtm .pagnMore, div.pagnBtm div.pagnSep {
padding: 0 2px;
}
div.pagn .pagnLead, div.pagnBtm .pagnLead {
font-weight: bold;
padding: 0 5px 0 2px;
}
div.pagn input, div.pagn input:visited, div.pagnBtm input, div.pagnBtm input:visited {
text-decoration: none;
padding: 6px;
color: #055d90;
white-space: nowrap;
}
div.pagn input:hover, div.pagn input:active, div.pagnBtm input:hover, div.pagnBtm input:active
{
text-decoration: none;
padding: 6px;
color:#050;
white-space: nowrap;
}
div.headerPaging {
background: url(“../images/tile-blue-bg._V45465059_.gif”) repeat-x;
}
Image for CSS
The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, googlinglive-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.
The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.