How to implement Paging and Sorting in ASP.NET Gridview Example?

Microsoft Technologies
May 15, 2016
4 (1 votes)
How to implement Paging and Sorting in ASP.NET Gridview Example?
4 out of 5 based on 1 user ratings
hot Video Call Service by divorced Housewives. WhatsApp her

Among Server side web programming ASP.NET is so popular. It was found in ASP.NET applications Gridview is a key element to present data in tabular shape. Above 90% ASP.NET web application uses Gridview. While presenting data in a Gridview to make this more user friendly Customer like to implement Paging and Sorting. Pagination helps to load data faster. Rather loading all records in one turn pagination loads data page wise. Similarly sorting give flexibility to sort the data alphabetically. Sorting also helps for search.

In this session I am sharing an example from my application, where I did implemented pagination & sorting in a Gridview. Look at the Code below how I did this.

Paging and Sorting in ASP.NET Gridview

<asp:GridView DataKeyNames="AdvID" CssClass="bodytext" AutoGenerateColumns="False" PageSize="25"
AllowPaging="True" AllowSorting="True" ID="grdEditViewAll" runat="server"
Width="100%" CellPadding="4" BackColor="White" BorderColor="#CCCCCC"
BorderStyle="None" BorderWidth="1px">
<Columns>
<asp:TemplateField ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>
<img src="../../IMAGES/input_arrow_down.gif" />
</HeaderTemplate>
<ItemTemplate>
<img src="../../IMAGES/icn_paper.gif" />
</ItemTemplate>
<HeaderStyle Width="25px" />
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:TemplateField>

<asp:TemplateField ItemStyle-CssClass="bodytext" HeaderStyle-HorizontalAlign="Left" HeaderText="Title" SortExpression="AdvTitle">
<ItemTemplate>
<span onmouseover="Tip('Click to preview <%# Container.DataItem("AdvTitle") %>')" onmouseout="UnTip()">
<asp:HyperLink ID="hypPreview" runat="server" Text=<%# Container.DataItem("AdvTitle") %>></asp:HyperLink>
</span>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
<ItemStyle CssClass="bodytext" HorizontalAlign="Left"></ItemStyle>
</asp:TemplateField>

<asp:BoundField ItemStyle-CssClass="bodytext" HeaderStyle-HorizontalAlign="Left"
DataField="AdvCompany" HeaderText="Company" SortExpression="AdvCompany">
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
<ItemStyle CssClass="bodytext" HorizontalAlign="Left"></ItemStyle>
</asp:BoundField>
<asp:BoundField ItemStyle-CssClass="bodytext" HeaderStyle-HorizontalAlign="Left"
DataField="AdResolution" HeaderText="Resolution" SortExpression="AdResolution">
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
<ItemStyle CssClass="bodytext" HorizontalAlign="Left"></ItemStyle>
</asp:BoundField>
<asp:BoundField Visible="false" ItemStyle-CssClass="bodytext" HeaderStyle-HorizontalAlign="Left"
DataField="NewCopyNPaste" HeaderText="Flag" SortExpression="NewCopyNPaste">
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
<ItemStyle CssClass="bodytext" HorizontalAlign="Left"></ItemStyle>
</asp:BoundField>
<asp:BoundField Visible="false" ItemStyle-CssClass="bodytext" HeaderStyle-HorizontalAlign="Left"
DataField="textColor" HeaderText="textColor" SortExpression="textColor">
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
<ItemStyle CssClass="bodytext" HorizontalAlign="Left"></ItemStyle>
</asp:BoundField>
<asp:BoundField Visible="false" ItemStyle-CssClass="bodytext" HeaderStyle-HorizontalAlign="Left"
DataField="Backgroundcolor" HeaderText="Backgroundcolor" SortExpression="Backgroundcolor">
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
<ItemStyle CssClass="bodytext" HorizontalAlign="Left"></ItemStyle>
</asp:BoundField>
<asp:TemplateField ItemStyle-CssClass="bodytext" HeaderStyle-HorizontalAlign="Left"
HeaderText="Edit">
<ItemTemplate>
<asp:HyperLink ID="hypEdit" runat="server" ImageUrl="../../Images/grdEdit.png"></asp:HyperLink>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
<ItemStyle CssClass="bodytext" HorizontalAlign="Left"></ItemStyle>
</asp:TemplateField>
<asp:TemplateField ItemStyle-CssClass="bodytext" HeaderStyle-HorizontalAlign="Left"
HeaderText="Delete">
<ItemTemplate>
<asp:HyperLink ID="hypDelete" runat="server" ImageUrl="../../Images/grdDelete.png"></asp:HyperLink>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
<ItemStyle CssClass="bodytext" HorizontalAlign="Left"></ItemStyle>
</asp:TemplateField>
<asp:TemplateField ItemStyle-CssClass="bodytext" HeaderStyle-HorizontalAlign="Left"
HeaderText="Code">
<ItemTemplate>
<a href='javascript:popupPageWH("../../AdManager/GenerateCode.aspx?AdvID=<%# Container.DataItem("AdvID") %>","theWindow","750","250")'
style="cursor: hand;"><img src="../../Images/arrow_circle_double.png" style="border:0px;" /></a>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
<ItemStyle CssClass="bodytext" HorizontalAlign="Left"></ItemStyle>
</asp:TemplateField>
</Columns>
<RowStyle Height="20px" ForeColor="#000066" />
<FooterStyle BackColor="White" ForeColor="#000066" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#005b90" Font-Bold="True" ForeColor="White" />
</asp:GridView>

To enable pagination & sorting first add these attribute to your Gridview control AllowPaging=”True” AllowSorting=”True”. Define DataKeyNames to your Gridview.

from Code-Behind

In your Code-Behind file first declare two variables ASCENDING & DESCENDING.

Dim ASCENDING As String = " ASC"
Dim DESCENDING As String = " DESC"

Then to Create PageIndexChanging event for your Gridview & add the below Code. Directly don’t Copy the below Code. First Create event then Copy the Code Inside.

Protected Sub grdEditViewAll_PageIndexChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewPageEventArgs) Handles grdEditViewAll.PageIndexChanging
grdEditViewAll.PageIndex = e.NewPageIndex
grdEditViewAll.DataBind()
End Sub

Then to implement Sorting implement the following. Here I created events for my Gridview while implementing make sure you updated correctly.

Protected Sub grdEditViewAll_Sorting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewSortEventArgs) Handles grdEditViewAll.Sorting
Dim sortExpression As String = e.SortExpression
If GridViewSortDirection = SortDirection.Ascending Then
GridViewSortDirection = SortDirection.Descending
SortGridView(sortExpression, DESCENDING)
Else
GridViewSortDirection = SortDirection.Ascending
SortGridView(sortExpression, ASCENDING)
End If
End Sub

Public Sub SortGridView(ByVal sortExpression As String, ByVal direction As String)
Dim dtable As DataTable = ds.Tables(0)
Dim dview As New DataView(dtable)
dview.Sort = sortExpression & direction
grdEditViewAll.DataSource = dview
grdEditViewAll.DataBind()
End Sub

Private Property GridViewSortDirection() As SortDirection
Get
If ViewState("sortDirection") Is Nothing Then
ViewState("sortDirection") = SortDirection.Ascending
End If
Return CType(ViewState("sortDirection"), SortDirection)
End Get
Set(ByVal Value As SortDirection)
ViewState("sortDirection") = Value
End Set
End Property

Tags:, , , , , ,