Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Custom Gridview Paging and Sorting with Vb.net

0.00/5 (No votes)
19 Jun 2011 1  
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

This articles was originally at wiki.asp.net but has now been given a new home on CodeProject. Editing rights for this article has been set at Bronze or above, so please go in and edit and update this article to keep it fresh and relevant.

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

 

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here