How can I have custom images in GridView Pagination

Question

Hi,

I am using VB.net for coding.

I am having GridView Control in my application.

<asp:GridView ID="GridView1" runat="server" CssClass="innerGridTable" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="TrainerID"
    DataSourceID="TrainerSearchDataSource">
    <Columns>
     <asp:ButtonField ButtonType="Button" ControlStyle-CssClass="Button" CommandName="SelectTrainer"
      HeaderText="Select" ShowHeader="True" Text="Select">
      <ControlStyle CssClass="Button" />
     </asp:ButtonField>
     <asp:TemplateField Visible="false" HeaderText="Trainer ID">
      <ItemTemplate>
       <asp:Label ID="lblTrainerID" runat="server" Text='<%# Bind("TrainerID") %>'></asp:Label>
      </ItemTemplate>
     </asp:TemplateField>                           
     <asp:BoundField DataField="TrainerName" HeaderText="Trainer Name" ReadOnly="True"
      SortExpression="TrainerName" />
     <asp:BoundField DataField="Phone" HeaderText="Phone number" SortExpression="Phone" />
     <asp:BoundField DataField="Email" Visible="false" HeaderText="Email Address" SortExpression="Email" />
     <asp:BoundField DataField="Address1" Visible="false" HeaderText="Address" SortExpression="Address1" />
     <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
     <asp:BoundField DataField="PostCode" HeaderText="PostCode" SortExpression="PostCode" />
     <asp:ButtonField ButtonType="Button" ControlStyle-CssClass="Button" CommandName="Archive"
      HeaderText="Archive" ShowHeader="True" Text="Delete">
      <ControlStyle CssClass="Button" />
     </asp:ButtonField>
    </Columns>
</asp:GridView>

I want my custom images in GridView Pagination for "Previous", "Next" etc.

Please suggest what are the option to achieve this functionality.

Thanks.

Best Regards, Yuv

Answer 1

GridView has a property named PagerSettings.
Is that what you are looking for?

Answer 2

Hi Guys,

I solved my problem using below code.

I added in GridView

 <PagerStyle BackColor="LightBlue" CssClass="paginationBlk"  Height="30px" VerticalAlign="Bottom" HorizontalAlign="Right" />
                        <PagerTemplate>
                            <asp:ImageButton ID="ImageButton3" OnCommand="Paginate" CommandArgument="First" CommandName="Page" runat="server" ImageUrl="~/images/arrow-start-active.gif" />
                            <asp:ImageButton ID="ImageButton1" OnCommand="Paginate" CommandArgument="Prev" CommandName="Page" runat="server" ImageUrl="~/images/arrow-left-active.gif" />
                            Page
                            <asp:DropDownList ID="ddlPages" OnSelectedIndexChanged="ddlPages_SelectedIndexChanged" runat="server" AutoPostBack="True">
                            </asp:DropDownList>
                            of
                            <asp:Label ID="lblPageCount" runat="server"></asp:Label>
                            <asp:ImageButton ID="ImageButton2" OnCommand="Paginate" CommandArgument="Next" CommandName="Page" runat="server" ImageUrl="~/images/arrow-right-active.gif" />
                            <asp:ImageButton ID="ImageButton4" OnCommand="Paginate" CommandArgument="Last" CommandName="Page" runat="server" ImageUrl="~/images/arrow-end-active.gif" />
                        </PagerTemplate>

and my CS file I added below code:

   Protected Sub GridView1_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridView1.DataBound
        Dim gvrPager As GridViewRow
        gvrPager = GridView1.BottomPagerRow

        If gvrPager Is Nothing Then
            Exit Sub
        End If
        Dim ddlPages As DropDownList = CType(gvrPager.Cells(0).FindControl("ddlPages"), DropDownList)
        Dim lblPageCount As Label = CType(gvrPager.Cells(0).FindControl("lblPageCount"), Label)

        If ddlPages IsNot Nothing Then
            ' populate pager
            For i As Integer = 0 To GridView1.PageCount - 1

                Dim intPageNumber As Integer = i + 1
                Dim lstItem As New ListItem(intPageNumber.ToString())

                If i = GridView1.PageIndex Then
                    lstItem.Selected = True
                End If
                ddlPages.Items.Add(lstItem)
            Next
        End If
        'populate page count
        If lblPageCount IsNot Nothing Then
            lblPageCount.Text = GridView1.PageCount.ToString()
        End If
    End Sub
    Protected Sub Paginate(ByVal sender As Object, ByVal e As CommandEventArgs)
        ' get the current page selected
        Dim intCurIndex As Integer = GridView1.PageIndex

        Select Case e.CommandArgument.ToString().ToLower()
            Case "first"
                GridView1.PageIndex = 0
                Exit Select
            Case "prev"
                GridView1.PageIndex = intCurIndex
                Exit Select
            Case "next"
                GridView1.PageIndex = intCurIndex
                Exit Select
            Case "last"
                GridView1.PageIndex = GridView1.PageCount
                Exit Select
        End Select

        ' popultate the gridview control
        'PopulateGrid()
    End Sub
    Protected Sub ddlPages_SelectedIndexChanged(ByVal sender As [Object], ByVal e As EventArgs)
        Dim gvrPager As GridViewRow = GridView1.BottomPagerRow
        Dim ddlPages As DropDownList = CType(gvrPager.Cells(0).FindControl("ddlPages"), DropDownList)

        GridView1.PageIndex = ddlPages.SelectedIndex

        ' a method to populate your grid
        'PopulateGrid()
    End Sub

Please have a look and let me know your feedbacks.

Cheers!

Yuv