To read the article online, visit http://www.4GuysFromRolla.com/webtech/082901-1.2.shtml

Custom ASP.NET Datagrid Paging With Exact Count, Part 2

By Dimitrios Markatos


  • Read Part 1

  • In Part 1 we looked at creating a custom paging solution using ASP.NET's DataGrid Web control. In Part 1 we focused in on the first (and most detailed) server-side subroutine: BindSQL(). In this part we'll look at the HTML content of the custom paging Web page and examine the other server-side subroutines and event handlers.

    The HTML Portion
    In our HTML section we need a couple of label controls to display various bits of information, such as what page we are currently viewing, how many total records there are, etc. We also need a DataGrid, to which we are binding the database results to. Don't forget to put the DataGrid in a WebForm (a <form> tag with the runat="server" attribute specified). Finally, we need a series of LinkButton Web controls, to display our Prev/First Page and Next/Last Page links.

    The content for the HTML section is as follows:

    <html>
    <body>
      'For our recordcount and pagecount
      <asp:Label id="lblPageCount" runat="server" /><br>
      <asp:label id="RecordCount" runat="server" />
      
      <form runat="server">
        <ASP:Datagrid id="pubs" runat="server" 
                      AllowPaging="True" 
                      AllowCustomPaging="False" 
                      Pagesize="10" 
                      PagerStyle-Visible = "False"
        />
    
        <%-- Display the First Page/Previous Page buttons --%>
        <asp:linkbutton id="Firstbutton" Text="<< 1st Page" 
                        CommandArgument="0" runat="server" 
                        onClick="PagerButtonClick"/>
        <asp:linkbutton id="Prevbutton" Text= "" 
                        CommandArgument="prev" runat="server" 
                        onClick="PagerButtonClick"/>
          
    
        <%-- Display the Next Page/Last Page buttons --%>
        <asp:linkbutton id="Nextbutton" Text= "" 
                        CommandArgument="next" runat="server" 
                        onClick="PagerButtonClick"/>
        <asp:linkbutton id="Lastbutton" Text="Last Page >>" 
                        CommandArgument="last" runat="server" 
                        onClick="PagerButtonClick"/>
    
        <br><br><br><br>
    
        Change Pagesize
        <asp:DropDownList id="ps" runat="server">
            <asp:ListItem>4</asp:ListItem>
            <asp:ListItem>5</asp:ListItem>
            <asp:ListItem>7</asp:ListItem>
            <asp:ListItem selected>10</asp:ListItem>
            <asp:ListItem>12</asp:ListItem>
            <asp:ListItem>15</asp:ListItem>
            <asp:ListItem>22</asp:ListItem>
        </asp:DropDownList>
        
        <asp:button text="Change Pagesize" runat="server" OnClick="RePage"/>
      </form>
    </body>
    </html>
    

    Note that in our DataGrid Web control we set the PagerStyle's Visible property to False. This is because we are implementing our own paging solution, and don't want to use the default paging style supported by the DataGrid Web control. (For more information on paging database results using the DataGrid's built-in functionality, be sure to read: Paging Database Results in ASP.NET!) Also note that the four LinkButton controls all specify the server-side subroutine PagerButtonClick as the sub to be called when they are clicked; similarly, the "Change Pagesize" button has the RePage subroutine defined as its OnClick event handler.

    The event handler for the four LinkButtons (PagerButtonClick) must display the appropriate page of data, be it the next page, the previous page, the first page, or the last page. Which page to display, of course, depends on what LinkButton the user clicked. The PagerButtonClick (shown below) uses the CommandArgument passed in from the LinkButton Web controls to determine which control was clicked, and then takes the appropriate action.

    Sub PagerButtonClick(sender As Object, e As EventArgs)
      'used by external paging UI
      Dim arg As String = sender.CommandArgument
    
      Select arg
         Case "next":  'The next Button was Clicked
            If (Pubs.CurrentPageIndex < (Pubs.PageCount - 1)) Then
                Pubs.CurrentPageIndex += 1
            End If 
    
         Case "prev":   'The prev button was clicked
             If (Pubs.CurrentPageIndex > 0) Then
                 Pubs.CurrentPageIndex -= 1
             End If
    
         Case "last":   'The Last Page button was clicked
             Pubs.CurrentPageIndex = (Pubs.PageCount - 1)
    
         Case Else:     'The First Page button was clicked
             Pubs.CurrentPageIndex = Convert.ToInt32(arg)
    	End Select
    
        'Now, bind the data!
        BindSQL()
    End Sub
    

    The RePage event handler, which is called when the "Change Pagesize" button is clicked, simply resets the DataGrid's CurrentPageIndex property back to 0 and rebinds the database data:

    Sub Repage(sender As Object, e As EventArgs)
      Pubs.CurrentPageIndex = 0
      BindSQL()
    End Sub
    

    Finally, the last two server-side subroutines are two meager helper subroutines, Next_Buttons() and Prev_Buttons(), which display the correct text for each of the LinkButtons. These two subs, which are called from BindSQL(), can be seen below:

    Sub Prev_Buttons()
      Dim PrevSet As String
    
      If Pubs.CurrentPageIndex+1 <> 1 and ResultCount <> -1 Then
        PrevSet = Pubs.PageSize
        PrevButton.Text = ("< Prev " & PrevSet)
    	
        If Pubs.CurrentPageIndex+1 = Pubs.PageCount Then
          FirstButton.Text = ("<< 1st Page")
        End If
      End If
    End Sub
    
    
    Sub Next_Buttons()
      Dim NextSet As String
    
      If Pubs.CurrentPageIndex+1 < Pubs.PageCount Then
        NextSet = Pubs.PageSize
        NextButton.Text = ("Next " & NextSet & " >")
      End If
    
      If Pubs.CurrentPageIndex+1 = Pubs.PageCount-1 Then
        Dim EndCount As Integer 
        EndCount = ResultCount - (Pubs.PageSize * (Pubs.CurrentPageIndex+1))
        NextButton.Text = ("Next " & EndCount & " >")
      End If
    End Sub
    
    [CustPaging.aspx">View a live demo!]

    Well, that's it! Be sure to view the complete code, try out the CustPaging.aspx">live demo, and read up on the related articles! If you have any questions, please do not hesitate to email me!

    Happy Programming!

  • By Dimitrios Markatos


    Attachments:

  • CustPaging.aspx">View the live demo!
  • Read Paging Database Results in ASP.NET
  • View the complete source (in text format)


  • Article Information
    Article Title: Custom ASP.NET Datagrid Paging With Exact Count, Part 2
    Article Author: Dimitrios Markatos
    Published Date: Wednesday, August 29, 2001
    Article URL: http://www.4GuysFromRolla.com/webtech/082901-1.2.shtml


    Copyright 2017 QuinStreet Inc. All Rights Reserved.
    Legal Notices, Licensing, Permissions, Privacy Policy.
    Advertise | Newsletters | E-mail Offers