<asp:GridView id="GridView1" runat="server"
OnRowDataBound="GridView1_RowDataBound"
OnRowCommand="GridView1_RowCommand"
AutoGenerateColumns="False" width="100%">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:LinkButton id="lnkbtnCusName" runat="server" CommandName="Sort"
CommandArgument="Cus_Name">Name</asp:LinkButton>
<asp:PlaceHolder id="placeholderName" runat="server"></asp:PlaceHolder>
</HeaderTemplate>
<ItemTemplate>
<asp:Label id="Label1" runat="server" Text='<%# Bind("Cus_Name") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:LinkButton id="lnkbtnGender" runat="server" CommandName="Sort"
CommandArgument="Cus_Gender">Gender</asp:LinkButton>
<asp:PlaceHolder id="placeholderGender" runat="server"></asp:PlaceHolder>
</HeaderTemplate>
<ItemTemplate>
<asp:Label id="Label4" runat="server" Text='<%# Bind("Cus_Gender") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:LinkButton id="lnkbtnAge" runat="server" CommandName="Sort" CommandArgument="Cus_Age">Age</asp:LinkButton>
<asp:PlaceHolder id="placeholderAge" runat="server"></asp:PlaceHolder>
</HeaderTemplate>
<ItemTemplate>
<asp:Label id="Label5" runat="server" Text='<%# Bind("Cus_Age") %>'> </asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:LinkButton ID="lnkbtnCusEmail" runat="server"
CommandArgument="Cus_Email" CommandName="Sort">Email Id
</asp:LinkButton>
<asp:PlaceHolder ID="placeholderEmail" runat="server"></asp:PlaceHolder>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("Cus_Email") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:LinkButton id="lnkbtnCusState" runat="server" CommandName="Sort"
CommandArgument="Cus_State">State</asp:LinkButton>
<asp:PlaceHolder id="placeholderState" runat="server"> </asp:PlaceHolder>
</HeaderTemplate>
<ItemTemplate>
<asp:Label id="Label3" runat="server" Text='<%# Bind("Cus_State") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

To create custom paging for the GridView control, we are going add a DataList control and name it as dlPaging. In its ItemTemplate section, add a LinkButton, name it as lnkbtnPaging. Set its CommandName property as lnkbtnPaging. Then choose End Template Editing and add two more LinkButton controls on either side of the DataList control. Name it as lnkbtnPrevious and lnkbtnNext and change its Text property as Previous and Next respectively. Better I suggest you to put an Html Table control and place these controls in it properly so that it will look nicely aligned. The Html source of these controls is given below.

<asp:LinkButton id="lnkbtnPrevious"
onclick="lnkbtnPrevious_Click" runat="server"> Previous </asp:LinkButton>
<asp:DataList id="dlPaging" runat="server"
RepeatDirection="Horizontal"
OnItemDataBound="dlPaging_ItemDataBound"
OnItemCommand="dlPaging_ItemCommand">
<ItemTemplate>
<asp:LinkButton ID="lnkbtnPaging" runat="server"
CommandArgument='<%# Eval("PageIndex") %>'
CommandName="lnkbtnPaging"
Text='<%# Eval("PageText") %>'></asp:LinkButton>
</ItemTemplate>
</asp:DataList>
<asp:LinkButton id="lnkbtnNext"
onclick="lnkbtnNext_Click" runat="server">Next</asp:LinkButton>

Declaration Section:

For the purpose of this tutorial, we have collaborated both paging and sorting for a single GridView control. So every section of the source code explained below will cover both custom paging and sorting concept. Just concentrate bit more from here. For the purpose of custom paging, we are creating an instance of PagedDataSource class as follows

PagedDataSource pds = new PagedDataSource();

For maintaining the Page Index of the GridView control, we are going to maintain a ViewState variable called ‘CurrentPage’. It has to be declared and initialize as follows

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

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

The complete source code for BindGrid method is explained below.

private void BindGrid()
{
string sql = "Select * from Customer Order By Cus_Name";
SqlDataAdapter da = new SqlDataAdapter(sql, “YourConnectionString”);
DataTable dt = new DataTable();
da.Fill(dt);
DataView dv = dt.DefaultView;

if (this.ViewState["SortExp"] != null)
{
dv.Sort = this.ViewState["SortExp"].ToString()
+ " " + this.ViewState["SortOrder"].ToString();
}
pds.DataSource = dv;
pds.AllowPaging = true;
pds.PageSize = 10;
pds.CurrentPageIndex = CurrentPage;
lnkbtnNext.Enabled = !pds.IsLastPage;
lnkbtnPrevious.Enabled = !pds.IsFirstPage;
GridView1.DataSource = pds;
GridView1.DataBind();
doPaging();
}

The above method fetches data from the Customer table, fill it in a DataTable, and set it to a DataView for purpose of Sorting and Paging concurrently. Next there is two ViewState variables such as SortExp and SortOrder, which stands for Sort Expression (the field to sort the GridView) and Sorting Order (Ascending or Descending order) respectively. Since the GridView works for sorting and paging concurrently, we have to maintain the Sort Expression and Sorting Order in the ViewState variables. So if the Sort Expression is available, then the DataView’s Sort property will be set with the ViewState’s SortExp and SortOrder values.
Next, we are binding PagedDataSource objects with the DataView, set its property AllowPaging to True, set its PageSize to 10, and initialize its CurrentPageIndex with our CurrentPage variable. By default CurrentPage will be 0. Then we set the Enabled property of the Previous and Next LinkButton controls with the PagedDataSource objects IsFirstPage and IsLastPage property. This is to make the Previous and Next LinkButton controls disable when the PageIndex reaches first and last page respectively.
Last, we bind the GridView control with PagedDataSource object to display the records and call another private method ‘doPaging’ for building custom Paging page numbers. The code for doPaging method is as follows

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();
}

So the doPaing method has a DataTable with two columns such as PageIndex and PageText. The PageIndex column is the selected index value and PageText column is the display value in the dlPaging. So this DataTable has to be binded with dlPaging DataList control.

In the GridView’s RowCommand event, we are going to do sort operation for the GridView control as follows

protected void GridView1_RowCommand(object sender,
GridViewCommandEventArgs e)
{
if (e.CommandName.Equals("Sort"))
{
if (this.ViewState["SortExp"] == null)
{
this.ViewState["SortExp"] = e.CommandArgument.ToString();
this.ViewState["SortOrder"] = "ASC";
}
else
{
if (this.ViewState["SortExp"].ToString() == e.CommandArgument.ToString())
{
if (this.ViewState["SortOrder"].ToString() == "ASC")
this.ViewState["SortOrder"] = "DESC"; 
else
this.ViewState["SortOrder"] = "ASC";
}
else
{ 
this.ViewState["SortOrder"] = "ASC"; 
this.ViewState["SortExp"] = e.CommandArgument.ToString(); 
}
} 
BindGrid();
}
}

First we have to check the CommandName is equals “Sort” command, if so, we can initialize the ViewState variable “SortExp” with the CommandArgument (which contains the field name to sort) and “SortOrder” with “ASC” for ascending or “DESC” for descending order sorting. The above code got two conditions of assignment.

After all the checking and assignment, call the BindGrid event to re-arrange the GridView rows according to the above specified Sort Expression and Sort Order.

Source Code for Image Indicator in Header Row

Source Code for Custom Paging

We have already completed the designing part of the Custom Paging for the GridView control. The DataList dlPaging will display page numbers. When it is clicked, the corresponding page will be appeared in the GridView control without disturbing the Sorting. For this we have to write code at the dlPaging ItemCommand event as follows

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

Here we just set the CurrentPage value from the CommandArgument, which is actually the PageIndex, then call the BindGrid event. Thus we have integrated the DataList and the GridView control to perform Custom Paging.
To highlight the selected Page Number (PageIndex) in different style, do 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; 
}
}