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 << for first…
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 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 ..
Method 2
The default Pager of GridView is not flexible.
The alternatives are these
- Using Pager Template of the GridView (GridView PagerTemplate Property by MSDN)
- Extending the GridView control to support DataPager (example here)
Method 3
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" />
Method 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(' + " rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"'ctl00$ContentPlaceHolder1$gvReport'" + ',' + "'Page$First'" + ')">First</a></td>');
$('.gridviewPager').closest("tr").find("table tbody tr").append('<td><a href="javascript:__doPostBack(' + " rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"'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>All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0