GridView Paging - First, Last, Next, Previous

Question

Is it possible to add:

\"First, Last, Next, Previous\" options to the GridView paging? I can\'t seem to figure it out. All I can get are numbers and >> for last and

Answer 1

Set the value of the PageText properties of the PagerSettings section:

<asp:GridView ID="gridView" runat="server" AllowPaging="True">
    <PagerSettings  Mode="NextPreviousFirstLast" FirstPageText="First" PreviousPageText="Previous" NextPageText="Next" LastPageText="Last" />
</asp:GridView>

You can set these values from the Properties window in the designer too ..

Answer 2

Yes it is possible using PagerSettings property of gridview, all you need to do is- set Mode of PagerSetting to 'NextPreviousFirstLast' so that you can use "First, Last, Next, Previous" option for paging with gridview.

  <PagerSettings  Mode="NextPreviousFirstLast" FirstPageText="First" PreviousPageText="Previous" NextPageText="Next" LastPageText="Last" />

There are three more properties of Mode like "NextPrevious" , "Numeric" and "NumericFirstLast"

to use them ..

NextPrevious :

 <PagerSettings Mode="NextPrevious" PreviousPageText="Previous" NextPageText="Next"/>

Numeric :

  <PagerSettings  Mode="Numeric" />

NumericFistLast :

      <PagerSettings  Mode="NumericFistLast" />

Answer 3

The default Pager of GridView is not flexible.

The alternatives are these

1. Using Pager Template of the GridView (GridView PagerTemplate Property by MSDN)
2. Extending the GridView control to support DataPager (example here)

Answer 4

enter image description hereWe can also combined number and first and last custom button in gridview For this, we need to enable normal paging in gridview
then set pagerstyle This will show normal paging with numbers. For the custom first and last button Write jquery code for that

$(document).ready(function () { //For the first button at first position of pager use prepend method $('.gridviewPager').closest('tr').find('table tbody tr').prepend('First'); //For the Last button at last position of pager use append method $('.gridviewPager').closest("tr").find("table tbody tr").append('Last'); })

pager with first and last button

 <script type="text/javascript">
        $(document).ready(function () {
            $('.gridviewPager').closest('tr').find('table tbody tr').prepend('<td><a href="javascript:__doPostBack(' + "'ctl00$ContentPlaceHolder1$gvReport'" + ',' + "'Page$First'" + ')">First</a></td>');
            
            $('.gridviewPager').closest("tr").find("table tbody tr").append('<td><a href="javascript:__doPostBack(' + "'ctl00$ContentPlaceHolder1$gvReport'" + ',' + "'Page$Last'" + ')">Last</a></td>');
        })
    </script>

 <style>
        .gridviewPager {
            background-color: #fff;
            padding: 2px;
            margin: 2% auto;
        }

            .gridviewPager a {
                margin: auto 1%;
                border-radius: 50%;
                background-color: #545454;
                padding: 5px 10px 5px 10px;
                color: #fff;
                text-decoration: none;
                -o-box-shadow: 1px 1px 1px #111;
                -moz-box-shadow: 1px 1px 1px #111;
                -webkit-box-shadow: 1px 1px 1px #111;
                box-shadow: 1px 1px 1px #111;
            }

                .gridviewPager a:hover {
                    background-color: #337ab7;
                    color: #fff;
                }

            .gridviewPager span {
                background-color: #066091;
                color: #fff;
                -o-box-shadow: 1px 1px 1px #111;
                -moz-box-shadow: 1px 1px 1px #111;
                -webkit-box-shadow: 1px 1px 1px #111;
                box-shadow: 1px 1px 1px #111;
                border-radius: 50%;
                padding: 5px 10px 5px 10px;
            }
    </style>

 <asp:GridView ID="gvReport" runat="server"   DataKeyNames="ID" class="table table-striped table-bordered" AllowPaging="true" PageSize="10" Width="100%" AutoGenerateColumns="false">
                                    <PagerStyle CssClass="gridviewPager" />
                                    
                                    <Columns>
                                        <asp:TemplateField HeaderText="Sr No">
                                            <ItemTemplate>
                                                <asp:Label ID="lblSrNo" runat="server" Text='<%#Container.DataItemIndex+1 %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                       <asp:BoundField DataField="ID" HeaderText="Id" Visible="false"></asp:BoundField>
                                        <asp:BoundField DataField="NameE" HeaderText="Aadhar Name"></asp:BoundField>
                                        <asp:BoundField DataField="District" HeaderText="District Name"></asp:BoundField>
                                        <asp:BoundField DataField="Block" HeaderText="Block Name"></asp:BoundField>
                                        <asp:BoundField DataField="Mobile" HeaderText="Mobile"></asp:BoundField>
                                        <asp:BoundField DataField="AMobile" HeaderText="Alternate Mobile"></asp:BoundField>
                                        <asp:BoundField DataField="Adhar" HeaderText="Adhar"></asp:BoundField>
                                        <asp:BoundField DataField="Gender" HeaderText="Gender"></asp:BoundField>
                                        <asp:BoundField DataField="Sector" HeaderText="Sector's"></asp:BoundField>
                                        <asp:BoundField DataField="Age" HeaderText="Age"></asp:BoundField>
                                        <asp:BoundField DataField="Qualification" HeaderText="Highest Qualification"></asp:BoundField>
                                        <asp:BoundField DataField="GREDTYPE" HeaderText="Score Type"></asp:BoundField>
                                        <asp:BoundField DataField="PGC" HeaderText="Per./Grade/CGPA"></asp:BoundField>
                                        

                                    </Columns>
                                </asp:GridView>