PagerSetting Modes in ASP.NET GridView Control

In ASP.NET, the GridView Server control provides the built-in paging functionality to display the bulk data in a distributed manner. In order to show built-in paging you need to set two properties,  AllowPaging="true" and PageSize of GridView control, it will then automatically show you the paging UI on the page.

You can however create your own custom paging interface by modifying the GridView paging template. You can modify the default behavior of the GridView pager UI. The GridView provides the pager template to customize the default User Interface of paging.

Customize the paging UI

For this purpose the GridView has various types of modes that identify the types of buttons to navigate the records between pages.

The Mode property of the GridView declares the type of navigation to display with the GridView control.

The available paging modes are:

NextPrevious: This mode is used to construct Next and Previous buttons to jump to the next and previous pages of the paginated control.

NextPreviousFirstLast: This mode is used displays Next, Previous buttons with First and Last buttons to directly jump to the first and last pages.

Numeric: This mode is used to displays numeric link buttons corresponding to the pages of the paginated control.

NumericFirstLast: This mode is used to displays numeric link buttons with First and Last buttons to directly access the first and last pages.

Let' disucss all of the modes with an example.

First, I create a GridView Control in my ASP.Net page and bind it with the DataSource using C#.

<asp:GridView ID="GridviewManageUser" runat="server" AllowPaging="true" PageSize="10 "HeaderStyle-BackColor="#A279AF" HeaderStyle-ForeColor="White">

Now, set the PagerSetting mode one by one on the preceding create GridView.

NextPrevious:

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

 Output:



Numeric

<PagerSettings Mode="Numeric" PageButtonCount="4" />

 Output:



NextPreviousFirstLast

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

Output



NumericFirstLast

<PagerSettings Mode="NumericFirstLast" PageButtonCount="4"  FirstPageText="First"LastPageText="Last"/> 

Output: