Use CSS styles for Pager when using Custom Paging using SQL Server for ASP.Net GridView

Last Reply on Jan 30, 2013 04:23 AM By Mudassar

Posted on Jan 23, 2013 09:59 AM

HI

according to below link I used pagination for my datalist

http://www.aspsnippets.com/Articles/Custom-Paging-in-ASP.Net-GridView-using-SQL-Server-Stored-Procedure.aspx

 

here it show page number simply like :

1 2 3 ...

I want put border around number and set background color for it I mean I want show number pretty

do you have any css refrence for it?

thanks alot

 

 

 

 

 

 

Posted on Jan 30, 2013 04:23 AM

1. Place the following on your Page

 <style type="text/css">
        .pager
        {
            background-color: #3AC0F2;
            color: white;
            height: 20px;
            min-width: 20px;
            line-height: 20px;
            display: inline-block;
            text-align: center;
            text-decoration: none;
            border: 1px solid #2E99C1;
        }
        .active_pager
        {
            background-color: #2E99C1;
            color: white;
            height: 20px;
            min-width: 20px;
            line-height: 20px;
            display: inline-block;
            text-align: center;
            text-decoration: none;
            border: 1px solid #2E99C1;
        }
    </style>

2. Change the Repeater in that article as follows

 <asp:Repeater ID="rptPager" runat="server">
            <ItemTemplate>
                <asp:LinkButton ID="lnkPage" runat="server" Text='<%#Eval("Text") %>' CommandArgument='<%# Eval("Value") %>'
                    CssClass='<%# Convert.ToBoolean(Eval("Enabled")) == true ? "pager" : "active_pager" %>'
                    OnClick="Page_Changed"></asp:LinkButton>
            </ItemTemplate>
        </asp:Repeater>