Results 1 to 3 of 3

Thread: Creating your own DataGrid Paging Control

  1. #1

    Thread Starter
    I'm about to be a PowerPoster! mendhak's Avatar
    Join Date
    Feb 2002
    Location
    Ulaan Baator GooGoo: Frog
    Posts
    38,173

    Creating your own DataGrid Paging Control

    Personally, I am not very fond of the default paging control that the DataGrid has. Instead, I'd like something like this:



    So that the user can enter the page number and go directly. Of course, not everyone would want the same thing, but it really depends upon your needs.

    To start with, create a new web user control in your project, call it PagingControl.ascx.

    In the HTML:

    Code:
    <table cellSpacing="0" cellPadding="0" width="100%" border="0">
    	<tr>
    		<td align="center" id="tdFooterDisplay" runat="server" height="5px">
    			<asp:Label ID="lblCurrentPageNumber" Runat="server"></asp:Label>
    		</td>
    	</tr>
    	<tr>
    		<td align="right"><asp:label id="lblPage" Runat="server"></asp:label>&nbsp;<asp:textbox id="txtPageNumber" Runat="server" Width="20"></asp:textbox>&nbsp;<asp:label id="lblOf" Runat="server"></asp:label>&nbsp;<asp:label id="lblTotalPages" Runat="server"></asp:label>
    			<asp:button id="btnGo" Runat="server"></asp:button>
    			<asp:RegularExpressionValidator Text="*" ControlToValidate="txtPageNumber" id="RegularExpressionValidator1" runat="server"
    				ValidationExpression="\d"></asp:RegularExpressionValidator></td>
    	</tr>
    </table>
    In its codebehind,

    VB Code:
    1. Imports System.Text.RegularExpressions

    That's the only Imports required, you'll see why later.

    Then,

    VB Code:
    1. Public Delegate Sub PageChangedEventHandler(ByVal sender As Object, ByVal e As DataNavigatorEventArgs)
    2.  
    3.  
    4.  
    5.     Public Event PageChanged As PageChangedEventHandler
    6.  
    7.  
    8.  
    9.  
    10.  
    11.     Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    12.         'Put user code to initialize the page here
    13.  
    14.  
    15.         Me.btnGo.CssClass = Me.CSSButtonClass
    16.         Me.txtPageNumber.CssClass = Me.CSSTextBoxClass
    17.         Me.tdFooterDisplay.Attributes.Add("class", Me.CSSFooterDisplayClass)
    18.  
    19.  
    20.  
    21.         Me.lblOf.Text = "Of"
    22.         Me.lblPage.Text = "Page"
    23.         Me.btnGo.Text = "Go"
    24.  
    25.  
    26.  
    27.         If Not Page.IsPostBack Then
    28.             Me.txtPageNumber.Text = Me.CurrentPage.ToString
    29.             Me.lblTotalPages.Text = Me.TotalPages.ToString
    30.             Me.lblCurrentPageNumber.Text = Me.CurrentPage.ToString.Trim
    31.         End If
    32.        
    33.  
    34.  
    35.     End Sub
    36.  
    37.  
    38.  
    39.  
    40.     'Protected Sub OnPageChangedButton(ByVal sender As Object, ByVal e As EventArgs)
    41.     '    Dim args As DataNavigatorEventArgs = New DataNavigatorEventArgs
    42.     '    args.CurrentPage = Integer.Parse(txtPageNumber.Text)
    43.     '    args.TotalPages = Integer.Parse(lblTotalPages.Text)
    44.     '    OnPageChanged(args)
    45.  
    46.     'End Sub
    47.  
    48.     Protected Sub OnPageChanged(ByVal args As DataNavigatorEventArgs)
    49.  
    50.         RaiseEvent PageChanged(Me, args)
    51.  
    52.     End Sub
    53.  
    54.  
    55.  
    56.     Private _intCurrentPage As Integer = 1
    57.     Private _intTotalPages As Integer
    58.     Private _strButtonCSSClass As String
    59.     Private _strTextBoxCSSClass As String
    60.     Private _strCSSFooterDisplayClass As String
    61.  
    62.  
    63.  
    64.     Public Property CSSFooterDisplayClass() As String
    65.         Get
    66.             Return _strCSSFooterDisplayClass
    67.         End Get
    68.         Set(ByVal Value As String)
    69.             _strCSSFooterDisplayClass = Value
    70.         End Set
    71.     End Property
    72.  
    73.  
    74.     Public Property CurrentPage() As Integer
    75.         Get
    76.             Return _intCurrentPage
    77.         End Get
    78.         Set(ByVal Value As Integer)
    79.             _intCurrentPage = Value
    80.  
    81.         End Set
    82.     End Property
    83.  
    84.     Public Property TotalPages() As Integer
    85.         Get
    86.             Return _intTotalPages
    87.  
    88.         End Get
    89.         Set(ByVal Value As Integer)
    90.             _intTotalPages = Value
    91.  
    92.         End Set
    93.     End Property
    94.  
    95.     Public Property CSSButtonClass() As String
    96.         Get
    97.             Return _strButtonCSSClass
    98.         End Get
    99.         Set(ByVal Value As String)
    100.             _strButtonCSSClass = Value
    101.         End Set
    102.     End Property
    103.  
    104.     Public Property CSSTextBoxClass() As String
    105.         Get
    106.             Return _strTextBoxCSSClass
    107.         End Get
    108.         Set(ByVal Value As String)
    109.             _strTextBoxCSSClass = Value
    110.         End Set
    111.     End Property
    112.  
    113.  
    114.     Private Sub btnGo_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnGo.Click
    115.  
    116.         Dim args As New DataNavigatorEventArgs
    117.         args.CurrentPage = Integer.Parse(Me.txtPageNumber.Text)
    118.         args.TotalPages = Integer.Parse(Me.lblTotalPages.Text)
    119.         OnPageChanged(args)
    120.         Me.lblCurrentPageNumber.Text = args.CurrentPage.ToString()
    121.     End Sub

    That constitutes the code for your PagingControl class. You also need to create a DataNavigatorEventArgs class:

    VB Code:
    1. Public Class DataNavigatorEventArgs
    2.     Inherits EventArgs
    3.  
    4.  
    5.     Private m_iCurrentPage As Integer
    6.     Private m_iTotalPages As Integer
    7.  
    8.     Public Sub New()
    9.  
    10.     End Sub
    11.  
    12.     Public Property CurrentPage() As Integer
    13.         Get
    14.             Return m_iCurrentPage
    15.         End Get
    16.         Set(ByVal Value As Integer)
    17.             m_iCurrentPage = Value
    18.         End Set
    19.     End Property
    20.  
    21.     Public Property TotalPages() As Integer
    22.         Get
    23.             Return m_iTotalPages
    24.         End Get
    25.         Set(ByVal Value As Integer)
    26.             m_iTotalPages = Value
    27.         End Set
    28.     End Property
    29.  
    30.  
    31. End Class

    That's it. Your paging control is now ready. Use it as shown in the next post



    Keywords: mendhak custom datagrid paging pineapples
    Attached Images Attached Images  
    Last edited by mendhak; Aug 21st, 2006 at 11:02 AM.

  2. #2

    Thread Starter
    I'm about to be a PowerPoster! mendhak's Avatar
    Join Date
    Feb 2002
    Location
    Ulaan Baator GooGoo: Frog
    Posts
    38,173

    Re: Creating your own DataGrid Paging Control

    On my page, I placed a datagrid and below that, the paging control.

    Code:
    			<table width="100%" cellpadding="0" cellspacing="0" border="0">
    				<tr>
    					<td>
    						<asp:DataGrid id="DataGrid1" runat="server" AllowPaging="True" Width="100%">
    							<PagerStyle Visible="False" NextPageText="" PrevPageText=""></PagerStyle>
    						</asp:DataGrid>
    						<uc1:PagingControl id="PagingControl1" runat="server"></uc1:PagingControl>
    					</td>
    				</tr>
    			</table>
    In the codebehind,

    VB Code:
    1. Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    2.         'Put user code to initialize the page here
    3.  
    4.  
    5.         Me.PagingControl1.CSSTextBoxClass = "iStyle"
    6.         Me.PagingControl1.CSSButtonClass = "buttonStyle"
    7.         Me.PagingControl1.CSSFooterDisplayClass = "dgFooterStyle"
    8.  
    9.  
    10.         If Not Page.IsPostBack Then
    11.             bindgrid()
    12.         End If
    13.  
    14.     End Sub
    15.  
    16.  
    17.  
    18.     Private Sub bindgrid()
    19.         Dim totalCount As Integer
    20.  
    21.         Dim con As SqlConnection = New SqlConnection("data source=xxxxxx;initial catalog=pubs;Uid=xxxxxxxxx;pwd=xxxxxxxxx;packet size=4096;")
    22.         Dim cmd As SqlCommand = New SqlCommand("Get_Employees", con)
    23.         cmd.CommandType = CommandType.StoredProcedure
    24.  
    25.         Dim param As SqlParameter = cmd.Parameters.Add("@CurrentPage", SqlDbType.Int)
    26.         param.Direction = ParameterDirection.Input
    27.         param.Value = PagingControl1.CurrentPage
    28.  
    29.         param = cmd.Parameters.Add("@PageSize", SqlDbType.Int)
    30.         param.Direction = ParameterDirection.Input
    31.         param.Value = 10
    32.  
    33.         param = cmd.Parameters.Add("@TotalRecords", SqlDbType.Int)
    34.         param.Direction = ParameterDirection.Output
    35.  
    36.         Dim da As SqlDataAdapter = New SqlDataAdapter(cmd)
    37.         Dim ds As DataSet = New DataSet
    38.         da.Fill(ds)
    39.         totalCount = CInt(cmd.Parameters("@TotalRecords").Value)
    40.  
    41.         DataGrid1.DataSource = ds
    42.         DataGrid1.DataBind()
    43.  
    44.         If (totalCount Mod 10) = 0 Then
    45.             PagingControl1.TotalPages = totalCount / 10
    46.         Else
    47.             PagingControl1.TotalPages = (totalCount / 10) + 1
    48.         End If
    49.  
    50.      
    51.  
    52.         da.Dispose()
    53.         cmd.Dispose()
    54.         con.Close()
    55.         con.Dispose()
    56.     End Sub
    57.  
    58.     Private Sub PagingControl1_PageChanged(ByVal sender As Object, ByVal e As DataNavigatorEventArgs) Handles PagingControl1.PageChanged
    59.  
    60.         Me.PagingControl1.CurrentPage = e.CurrentPage
    61.         bindgrid()
    62.  
    63.  
    64.     End Sub

    Be sure to set the AllowPaging property of the datagrid to true, and the PagerStyle.Visible property to false.
    Last edited by mendhak; Jul 15th, 2005 at 04:54 AM.

  3. #3

    Thread Starter
    I'm about to be a PowerPoster! mendhak's Avatar
    Join Date
    Feb 2002
    Location
    Ulaan Baator GooGoo: Frog
    Posts
    38,173

    Re: Creating your own DataGrid Paging Control

    And finally, this is what the GET_EMPLOYEES SP looks like:

    Code:
    CREATE PROCEDURE Get_Employees( @CurrentPage int,
         @PageSize int,
         @TotalRecords int OUTPUT)
    
    AS
    
    -- Turn off count return.
    Set NoCount On
    
    -- Declare variables.
    Declare @FirstRec int
    Declare @LastRec int
    
    -- Initialize variables.
    Set @FirstRec = (@CurrentPage - 1) * @PageSize
    Set @LastRec = (@CurrentPage * @PageSize + 1)
    
    -- Create a temp table to hold the current page of data
    -- Add an ID column to count the records
    Create Table #TempTable
    (
     EmpId int IDENTITY PRIMARY KEY,
     fname varchar(20),
     lname varchar(30),
     pub_id char(4),
     hire_date datetime
    )
    
    --Fill the temp table with the reminders
    Insert Into #TempTable 
    (
     fname,
     lname,
     pub_id,
     hire_date
    )
    Select  fname,
      lname,
      pub_id,
      hire_date
    From  employee
    Order By lname
    
    --Select one page of data based on the record numbers above
    Select fname,
     lname,
     pub_id,
     hire_date
    From #TempTable
    Where EmpId > @FirstRec 
    And EmpId < @LastRec
    
    --Return the total number of records available as an output parameter
    Select @TotalRecords = Count(*)
    From #TempTable
    GO

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width