Tuesday, May 1

Gridview with different types of paging styles in asp.net or Numeric,NextPrevious,NextPreviousFirstLast,NumericFirstLast paging styles in gridview

Introduction:

Here I will explain how to show the gridview with different type of paging in asp.net

Description:


I have one gridview with multiple number rows at that time I tried to set paging for my gridview for that I have search gridview properties at that time I found different type of paging mode styles are available in gridview for paging those are 

1.      1) Numeric
2.      2) NextPrevious
3.      3) NextPreviousFirstLast
4.      4) NumericFirstLast
To use these options in our gridview we need to set AllowPaging="true" and PageSize="5" Properties here pageSize you can change based on your requirement after set these properties we can use different type of pagerstting modes to show different type of paging for gridview.

First Design our aspx page like this


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Show Gridview To</title>
<style type="text/css">
.Gridview
{
font-family:Verdana;
font-size:11pt;
font-weight:normal;
color:black;
width:350px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvEmpDetails" runat="server" CssClass="Gridview" AllowPaging="true" PageSize="4"HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="White" DataSourceID="dsEmpdetails">
<PagerSettings Mode="NumericFirstLast" PageButtonCount="4"  FirstPageText="First"LastPageText="Last"/> 
<PagerStyle BackColor="#7779AF" Font-Bold="true" ForeColor="White" /> 
</asp:GridView>
<asp:SqlDataSource ID="dsEmpdetails" runat="server"ConnectionString="<%$ConnectionStrings:dbconnection %>"
SelectCommand="select * from EmployeeDetails" >
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
After that set your database connection in web.config like this because we are using this connection in our sqldatasource to get the data from database

<connectionStrings>
<add name="dbconnection" connectionString="Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"/>
</connectionStrings >


Now our gridview is ready with data and I will explain how to use each paging option in our gridview if you observe above code I have set pagersetting property for gridview like this

<PagerSettings Mode="NumericFirstLast" PageButtonCount="4"  FirstPageText="First"LastPageText="Last"/>
Here I used NumericFirstLast pagersetting mode to display paging in gridview

NumericFirstLast: By setting this mode in gridview paging is like this 

Here in this paging mode PageButtonCount property is important because if we need to see the first and last pager buttons we need to reduce the PageButtonCount value because whenever our gridview paging data more than 10 pages then only we will see the Last and First buttons that is default value for gridview that’s why I have reduced my PageButtonCount value to 4 after 4 numeric pagers we will see Last button.      
  
Numeric: By default we will get this numeric paging once we set AllowPaging and PageSize properties in gridview to set this property to our gridview write the pagersetting property like this

<PagerSettings Mode="Numeric" PageButtonCount="4" />
By Setting above pager property our gridview paging like this

NextPrevious: If we want to use this mode for paging in gridview we need to change the PagerSettingsmode like this

<PagerSettings Mode="NextPrevious" PageButtonCount="4" PreviousPageText="Previous"NextPageText="Next" /> 
After changing PagerSettings mode our gridview like this

NextPreviousFirstLast: If we want to use this mode for paging in gridview we need to change thePagerSettings mode like this

<PagerSettings Mode="NextPreviousFirstLast" PageButtonCount="4" PreviousPageText="Previous"NextPageText="Next" FirstPageText="First" LastPageText="Last" />
After changing PagerSettings mode our gridview like this



Thanks Shibashish mohanty

No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

ShibashishMnty
shibashish mohanty