Custom Gridview Paging and Sorting with Vb.net

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.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