Link to home
Start Free TrialLog in
Avatar of wsturdev
wsturdevFlag for United States of America

asked on

Can you put a button in the Pager portion of a datagrid?

Is it possible to put a button in the Pager section of a datagrid?

I would set the Pager to be left aligned, and I want the button to be right aligned
ASKER CERTIFIED SOLUTION
Avatar of Justin_W
Justin_W

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of wsturdev

ASKER

Adding a completely custom Paging area did not appeal to me.  Probably could not decipher it in a short enough time.

I am exploring adding a control to the Paging area using the following code:

    Sub SectionDataGrid_ItemCreated(ByVal sender As Object, ByVal e As DataGridItemEventArgs)
        ' Get the newly created item
        Dim itemType As ListItemType = e.Item.ItemType

        ' Is it the pager?
        If (itemType = ListItemType.Pager) Then
            ' Extract the Pager
            Dim pager As TableCell = CType(e.Item.Controls(0), TableCell)

            ' Add Cell to Row to Hold Row Count Label
            Dim newcell As TableCell = New TableCell
            newcell.ColumnSpan = 1
            newcell.HorizontalAlign = HorizontalAlign.Right
            newcell.Style("border-color") = pager.Style("border-color") ' Set Border so the Pager Row looks seamless

            ' Add Button
            Dim navigationButton As Button = New Button
            navigationButton.ID = "Go_To_XXX"
            newcell.Controls.Add(navigationButton)

            ' Add Table Cell to Pager
            e.Item.Controls.AddAt(0, newcell)

            ' Subtract from Colspan of Original Pager to Account for New Row
            pager.ColumnSpan = pager.ColumnSpan - 1
        End If

    End Sub

The button I want appears as it should, but a new, sort of "blank" column appears at the right side of the datagrid, and at the base of that, in the paging area, is the original paging mechanism.

I want the original paging mechanism on the left side of the paging area, and the button on the right without that extra "column".

What can I do to make that happen?
Avatar of Justin_W
Justin_W

You can't simply add  additional TableCell controls, or else you will screw up the layout of the Table containing it (which is why you got misaligned columns). You would have to analyze the current control hierarchy, and then add controls in a way that would achieve your layout requirements without compromising the rest of the Grid's layout.

Custom Paging areas are really quite straight-forward to implement (easier than what you're doing, really). I would recommend that you look into them some more.
I will further investigate your suggestion of a custom pager, but will be on vacation for a while so will have to do it when I get back.
Well, it took a long time to get back to, but I finally worked this out.  Thanks for your input -- of the 2 suggestions you made, I chose to add a custom button to the Paging area as follows:

FIRST:
I generated the new button within the ItemCreated handler for the datagrid:

    Private Sub SectionDataGrid_ItemCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles SectionDataGrid.ItemCreated
                ' Get the newly created item
                Dim itemType As ListItemType = e.Item.ItemType
                ' Is it the pager?
                If (itemType = ListItemType.Pager) Then
                    ' Extract the Pager
                    Dim pager As TableCell = CType(e.Item.Controls(0), TableCell)
                    ' Add a spacer to push the button to the right
                    Dim pagerSpacer As Label = New Label
                    pagerSpacer.ID = "pagerSpacer"
                    pager.Controls.Add(pagerSpacer)
                    ' Add My Custom Button to the Pager
                    Dim btnMyCustomButton As Button = New Button
                    btnMyCustomButton.ID = "My_Custom_Button"
                    pager.Controls.Add(btnMyCustomButton)
                    ' Set up attributes of new button
                    btnMyCustomButton.Height = 20
                    btnMyCustomButton.Width = 118
                    btnMyCustomButton.Font.Size = 8
                    btnMyCustomButton.Text = "Blah Blah"
                    btnMyCustomButton.ForeColor = Color.Black
                    pagerSpacer.Text = "                   "
                End If
    End Sub

I had to add the "pagerSpacer" to force a separation between the automatically generated paging mechanism and my button.  Since I know there will never be more than 5 paging numbers, the spacing works well, but if you had an unpredictable number of pages, you could dynamically control the width of pagerSpacer and the various properties of the button.

SECOND:
In order to control the action of the new button in the paging area, I needed to direct the click of the button to run a procedure.  I could not just add an attribute to the button, because then the handler logic would have had to be in JavaScript.  My logic is extensive and is already coded in VB.Net, so this would not be feasible, so, I had to use logic to recognize that the button clicked was in the pager, and not one of the command buttons in the data rows of the datagrid:

    Private Sub SectionDataGrid_ItemCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles SectionDataGrid.ItemCommand
        Save_All_Changes()
        Dim itemType As ListItemType = e.Item.ItemType
        If (itemType = ListItemType.Pager) Then
            'Redirect control to my handler
            Handle_My_Custom_Button()
        Else
            Process clicks on other command buttons in the datagrid data rows
            Dim button As Button = e.Item.Cells(0).Controls(0)
            Session("intSectionNumber") = button.Text
            Session("strSectionName") = e.Item.Cells(1).Text
            Session("strNumberOfQuestionsThisSection") = e.Item.Cells(6).Text
            Session("strSectionDescription") = e.Item.Cells(3).Text
            RebindSectionDataGrid()
        End If
    End Sub
Yeah, that's pretty much what I had in mind for that kind of implementation. Congrats.