GridView Alphabetical Paging


This article is written by Pon Saravanan  on 16-Mar-10 Last modified on :16-Mar-10





GridView Alphabetical Paging in BottomPagerRow

Sometimes the data will be more helpful if presented in a nice and user friendly manner. I have noticed this in the hierarchical GridView which I had explained earlier in previous articles. Like that, this paging also gives an excellent way to group and present the data on the screen. Whenever there is a need of alphabetical lists such as names, products, cities, you may try the Alphabetical Paging.

Wait! There is no built in support for Alphabetical Paging. So there is a need of this article with complete working source code. I have coded this as far as I can explain easily.Look at the screen shots to have a fair idea about how this suppose to work.

Note:
1) As it is already explained in earlier articles several times, I am not going to explain again how to get the data and how to bind the data from database. So please refer to the Asp.net DataControls section or GridView section for that matter.

Screen Shots

Actual View

No Data View (no data to bind)

 

Construct the Pager Row

For this example, the buttons for all the alphabets will be placed in the bottom pager. Since totally 26 buttons to be created, to make it simple I created a function to create all the buttons. Just after DataBinding the controls have to be created i.e. the function has to be called. When creating buttons, using the command argument the alphabets are passed and command name is given as PAGINATE for differentiate the command from other commands.

Constraints in Pager Row control creation

1) To wire up the events in asp.net, the controls which are fired the PostBack should be available during the PostBack. Otherwise the event will not be mapped to the respective control. As a result just a PostBack only will happen. Since we are creating the controls at the code behind, the above rule applies.

2) Due to the nature for alphabetical paging, we will display/enable the alphabetical buttons even though there is no data for that particular alphabet. That means when you click on that letter, you will be served with the no records found (technically, the EmptyDataTemplate will be displayed). If the EmptyDataTemplate is displayed, you will no longer see the pager row. As a result you will be in dead end and you can not proceed to click on further letters. To workaround this I have recreated once again the pager row at the EmptyDataTemplate.  Finally a reusable function is written for catering both the cases EmptyDataTemplate and pager template at footer.

Paging with the support of RowCommand

The pagination is provided to the GridView with the help of RowCommand. As we have already seen the link buttons with alphabets are assigned with command name, command argument appropriately. So in the row command event the respective alphabet can be fetched. Based on that letter, the data can be fetched from the database. After binding the data the page row has to be recreated.

As I have already mentioned, while creating the pager row, the current DataSource has to be verified for creating pager row for footer or EmptyDataTemplate.

Source Code

Markup(*.ASPX)

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb"
    Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        .Pager
        {
         font-family:Georgia;
         font-style:italic;
         color:Gray;
         font-weight:bold;
         text-decoration:none;
         padding:5px 5px 5px 5px;
        }    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server"
            AllowPaging="true" BorderWidth="2px" AutoGenerateColumns="true" >
            <EmptyDataTemplate>
                No records found
                 <asp:Panel runat="server" ID="PagerPanel">
                   
                </asp:Panel>
            </EmptyDataTemplate>
            <PagerSettings Visible="true"  />
            <PagerTemplate>
                <asp:Panel runat="server" ID="PagerPanel">
                   
                </asp:Panel>
            </PagerTemplate>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

Code Behind(*.ASPX.vb)

Imports System.Data
Imports System.Data.SqlClient
Partial Class _Default
    Inherits System.Web.UI.Page
    Private ReadOnly Property ConnectionString() As String
        Get
            Return "Server=.\SQLEXPRESS;Database=NorthWind;" & _
                    "Trusted_Connection=True"
        End Get
    End Property
    Private ReadOnly Property Connection() As SqlConnection
        Get
            Dim ConnectionToFetch As New SqlConnection(ConnectionString)
            ConnectionToFetch.Open()
            Return ConnectionToFetch
        End Get
    End Property
    Public Function GetData() As DataView
        Return GetData(String.Empty)
    End Function
    Public Function GetData(ByVal Prefix As String) As DataView
        Dim SelectQry = "SELECT * FROM Products "
        If (Not String.IsNullOrEmpty(Prefix)) Then
            SelectQry &= " where ProductName like @Prefix + '%' "
        End If
        Dim SampleSource As New DataSet
        Dim SortableView As DataView
        Try
            Dim SampleCommand As New SqlCommand()
            Dim SampleDataAdapter = New SqlDataAdapter()
            SampleCommand.CommandText = SelectQry
            SampleCommand.Connection = Connection
            If (Not String.IsNullOrEmpty(Prefix)) Then
                Dim PrefixParam = New SqlParameter("@Prefix", Prefix)
                SampleCommand.Parameters.Add(PrefixParam)
            End If
            SampleDataAdapter.SelectCommand = SampleCommand
            SampleDataAdapter.Fill(SampleSource)
            SortableView = SampleSource.Tables(0).DefaultView
        Catch ex As Exception
            Throw ex
        End Try
        Return SortableView
    End Function
 
    Private Sub LoadGrid()
        Dim SortableView = GetData()
        
        GridView1.DataSource = SortableView
        GridView1.DataBind()
    End Sub
    Public Function FindControlRecursively(ByVal ParentControl As Control, _
                                           ByVal ControlTobeSearched As String) As Control
        Dim FoundControl As New Control
        For Each CurrentControl As Control In ParentControl.Controls
            Diagnostics.Debug.WriteLine(CurrentControl.ID)
            If (CurrentControl.ID = ControlTobeSearched) Then
                FoundControl = CurrentControl
                Exit For
            End If
            If (CurrentControl.HasControls) Then
                FoundControl = FindControlRecursively(CurrentControl, ControlTobeSearched)
            End If
        Next
        Return FoundControl
    End Function
    Private Sub CreatePagerRow()
        Dim PagerRow = GridView1.BottomPagerRow
        Dim PagerPanel As New Panel
        If (PagerRow Is Nothing) Then
            'the pager row is not available after the postback from
            'nodata templet so get it from No Row Template
            PagerPanel = FindControlRecursively(GridView1, "PagerPanel")
        Else 'if previous postback is from PagerRow
            PagerPanel = PagerRow.FindControl("PagerPanel")
            PagerRow.Visible = True
        End If
        CreatePagerRow(PagerPanel)
    End Sub
    Private Sub CreateEmptyDataPagerRow()
        Dim PagerRow = GridView1.BottomPagerRow
        Dim ControlFound = FindControlRecursively(GridView1, "PagerPanel")
        Dim PagerPanel = DirectCast(ControlFound, Panel)
        CreatePagerRow(PagerPanel)
    End Sub
    Private Sub CreatePagerRow(ByVal PagerPanel As Panel)
        For CharIndex = 65 To 90
            Dim PagerLink As New LinkButton
            PagerLink.Text = Convert.ToChar(CharIndex).ToString()
            PagerLink.CommandName = "PAGINATE"
            PagerLink.CssClass = "Pager"
            PagerLink.CommandArgument = PagerLink.Text
            PagerPanel.Controls.Add(PagerLink)
        Next
    End Sub
    Protected Sub _Default_Load(ByVal sender As Object, _
                                ByVal e As System.EventArgs) Handles Me.Load
        If (Not IsPostBack) Then
            LoadGrid()
        End If
        CreatePagerRow()
    End Sub
    Protected Sub GridView1_RowCommand(ByVal sender As Object, _
                                       ByVal e As GridViewCommandEventArgs) _
                                       Handles GridView1.RowCommand
        If (e.CommandName = "PAGINATE") Then
            Dim PagedData = GetData(e.CommandArgument)
            GridView1.DataSource = PagedData
            GridView1.DataBind()
            If (PagedData.Count > 0) Then 'if data available
                CreatePagerRow()
            Else 'in case of no data
                CreateEmptyDataPagerRow()
            End If
        End If
    End Sub
End Class











Comments
  • GUEST
    One of the best website i have seen for grid view. Keep up the good work 3/22/2010 6:17:56 AM

  • GUEST
    This is awesome. Good work. Works like a charm. It helped my first assignment. Thanks a lot 8/22/2010 8:49:21 AM

  • GUEST
    Thanks for the tutorial.
    I have a problem.
    I can view only 10 records in the page.
    how to make all the records visible??
    7/6/2011 3:31:46 AM


Comments
   
Captcha Image
For you specially:  
Captcha Text Enter the text in the image.(Not Case sensitive)    



Spam Bot Trap



   



Select Theme
White
Blue
Brown
Gray