how to add images in gridview pagination

Question

hi,

I am using vb.net code.

I have grid view, please see the code below:

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
    AutoGenerateColumns="False" CssClass="innerGridTable" DataKeyNames="OrgID" DataSourceID="OrgGridViewDataSource">
    <PagerSettings NextPageImageUrl="~/images/arrow-right-active.gif" PreviousPageImageUrl="~/images/arrow-left-active.gif" />
    <Columns>
     <asp:CommandField ShowSelectButton="True" ButtonType="Button" SelectText="Select"
      ControlStyle-CssClass="Button">
      <ControlStyle CssClass="Button"></ControlStyle>
     </asp:CommandField>
     <asp:BoundField DataField="OrgName" HeaderText="Organisation Name" SortExpression="OrgName">
     </asp:BoundField>
     <asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type"></asp:BoundField>
     <asp:BoundField Visible="true" DataField="OrgID" HeaderText="OrgID" InsertVisible="False"
      ReadOnly="True" SortExpression="OrgID"></asp:BoundField>
     <asp:TemplateField Visible="false" HeaderText="RAOG ID">
      <ItemTemplate>
       <asp:Label ID="lblRAOGID" runat="server" Text='<%# Bind("RAOGID") %>'></asp:Label>
      </ItemTemplate>
     </asp:TemplateField>
     <asp:TemplateField Visible="false" HeaderText="RAO ID">
      <ItemTemplate>
       <asp:Label ID="lblRAOID" runat="server" Text='<%# Bind("RAOID") %>'></asp:Label>
      </ItemTemplate>
     </asp:TemplateField>
     <asp:BoundField Visible="false" DataField="Name" HeaderText="Name" SortExpression="Name">
     </asp:BoundField>
    </Columns>
</asp:GridView>

I have gridview pagination, now I want to add images for previous and next button in pagination. How I can do it in the gridview.

Please help!

Answer 1

If you want to keep your accessibility when replacing text based elements with images, I have often used CSS as a preferred technique.

What I do is to set the element css to something like this:

text-indent: -9999em;
background-image: url(../images/bg-image.png);
background-repeat: no-repeat;

This way the underlying html is still good but the css adds the effect of using an image.

Just a thought.