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

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

<title>Show Gridview To</title>

.Gridview

{

font-family:Verdana;

font-size:11pt;

font-weight:normal;

color:black;

width:350px;

}

</style>

</head>

<body>

<div>

<asp:GridView ID="gvEmpDetails" runat="server" CssClass="Gridview" AllowPaging="true" PageSize="4"HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="White" DataSourceID="dsEmpdetails">

</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

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