By default, GridView automatically splits content across multiple pages and provides end-users with an embedded page navigation UI - Pager.
The built-in pager enables end-users to navigate through GridView data. It consists of the following navigation buttons: Next, Last, Previous, First and All. It also includes an indicator that displays the current page number and the total number of pages, and a page size item allowing you to specify the maximum number of rows that can be displayed within a page. To access and customize pager settings, use the GridViewSettings.SettingsPager property.
The GridView's look and feel can be customized with Templates. A template is a set of HTML elements and ASP.NET MVC extensions that define the layout for a particular element within the ASP.NET MVC extension (e.g., a pager). When the extension runs in the web page, template content is rendered in place of the default HTML for the extension.
The code sample below demonstrates how to implement a custom pager using the templates.
settings.Name = "GridView";
settings.SettingsPager.PageSize = 5;
settings.PreRender = (s, e) =>
var sender = s as MVCxGridView;
// Set the zero-based index of the initially displayed page
sender.PageIndex = 1;
The image below illustrates the result.
Page Navigation on the Client Side
GridView provides a client-side API that enables you to navigate a user to a specific page. The table below lists the available selection-related methods.
The example below demonstrates how to enable an end-user to navigate to any GridView page without clicking the pager. In this example, an end-user can use the SpinEdit editor to specify (by entering the number manually or by clicking the spin buttons) the page number to which the grid should be paged.