Your search did not match any results.

Data Grid - Paging

The DevExtreme DataGrid ships with comprehensive data paging support and can load rows in chunks to improve performance when displaying large data sets. This demo allows you to navigate between pages using the DataGrid’s integrated pager.

You can use the controls below the DataGrid to change pager display mode and toggle visibility of individual pager elements. Note: navigation buttons are always visible in compact mode.

Backend API
@(Html.DevExtreme().DataGrid() .ID("gridContainer") .ShowBorders(true) .Scrolling(scrolling => scrolling.RowRenderingMode(GridRowRenderingMode.Virtual)) .Paging(paging => paging.PageSize(10)) .Pager(pager => { pager.Visible(true); pager.DisplayMode(GridPagerDisplayMode.Full); pager.ShowPageSizeSelector(true); pager.AllowedPageSizes(new JS("[5, 10, 'all']")); pager.ShowInfo(true); pager.ShowNavigationButtons(true); }) .CustomizeColumns(@<text> function(columns) { columns[0].width = 70; columns[4].dataType = "date"; } </text>) .DataSource(d => d.WebApi().Controller("DataGridScrolling").LoadAction("Get").Key("Id")) ) <div class="options"> <div class="caption">Options</div> <div class="option-container"> <div class="option"> @(Html.DevExtreme().SelectBox() .ID("displayMode") .DataSource(new[] { new { text= "Display Mode 'full'", value= "full" }, new { text= "Display Mode 'compact'", value= "compact" } }) .DisplayExpr("text") .InputAttr("aria-label", "Display Mode") .ValueExpr("value") .Value("full") .OnValueChanged(@<text> function(data) { var dataGrid = $("#gridContainer").dxDataGrid("instance"); var showInfo = $("#showInfo").dxCheckBox("instance"); var navButtons = $("#showNavButtons").dxCheckBox("instance"); dataGrid.option("pager.displayMode", data.value); showInfo.option("disabled", data.value === "compact"); navButtons.option("disabled", data.value === "compact"); } </text>) ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .ID("showPageSizes") .Text("Show Page Size Selector") .Value(true) .OnValueChanged(@<text> function(data) { var dataGrid = $("#gridContainer").dxDataGrid("instance"); dataGrid.option("pager.showPageSizeSelector", data.value); } </text>) ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .ID("showInfo") .Text("Show Info Text") .Value(true) .OnValueChanged(@<text> function(data) { var dataGrid = $("#gridContainer").dxDataGrid("instance"); dataGrid.option("pager.showInfo", data.value); } </text>) ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .ID("showNavButtons") .Text("Show Navigation Buttons") .Value(true) .OnValueChanged(@<text> function(data) { var dataGrid = $("#gridContainer").dxDataGrid("instance"); dataGrid.option("pager.showNavigationButtons", data.value); } </text>) ) </div> </div> </div>
using DevExtreme.MVC.Demos.Models; using DevExtreme.MVC.Demos.Models.DataGrid; using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class DataGridController : Controller { public ActionResult RecordPaging() { return View(); } } }
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models; using System; using System.Collections.Generic; using System.Net.Http; using System.Web.Http; namespace DevExtreme.MVC.Demos.Controllers.ApiControllers { public class DataGridScrollingController : ApiController { [HttpGet] public HttpResponseMessage Get(DataSourceLoadOptions loadOptions) { return Request.CreateResponse(DataSourceLoader.Load(GenerateData(100000), loadOptions)); } IEnumerable<User> GenerateData(int count) { var surnames = new[] { "Smith", "Johnson", "Brown", "Taylor", "Anderson", "Harris", "Clark", "Allen", "Scott", "Carter" }; var names = new[] { "James", "John", "Robert", "Christopher", "George", "Mary", "Nancy", "Sandra", "Michelle", "Betty" }; var gender = new[] { "Male", "Female" }; var startBirthDate = DateTime.Parse("1/1/1975"); var endBirthDate = DateTime.Parse("1/1/1992"); double s = 123456789; Func<double> random = () => { s = (1103515245 * s + 12345) % 2147483647; return s % (names.Length - 1); }; for(var i = 0; i < count; i++) { var birthDate = new DateTime(startBirthDate.Ticks + Convert.ToInt64(Math.Floor(random() * (endBirthDate.Ticks - startBirthDate.Ticks) / 10))); birthDate.AddHours(12); var nameIndex = Convert.ToInt32(random()); yield return new User { Id = i + 1, FirstName = names[nameIndex], LastName = surnames[Convert.ToInt32(random())], Gender = gender[Convert.ToInt32(Math.Floor(Convert.ToDouble(nameIndex / 5)))], BirthDate = birthDate }; } } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models { public class User { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Gender { get; set; } public DateTime BirthDate { get; set; } } }
#gridContainer { max-height: 800px; } .options { margin-top: 20px; padding: 20px; background-color: rgba(191, 191, 191, 0.15); position: relative; } .caption { font-size: 18px; font-weight: 500; } .option-container { display: flex; margin: 0 auto; justify-content: space-between; } .option { margin-top: 10px; display: flex; align-items: center; } .option-caption { white-space: nowrap; margin: 0 8px; }

The built-in Grid pager contains the following UI elements:

  • Page navigator
    Enables page navigation.

  • Page size selector
    Changes page size. To display this element, enable the showPageSizeSelector property. You can also define allowed page sizes and specify the initial page size.

  • Page information
    Displays current page number and total record count. To display page information, enable the showInfo property. You can customize this information text as needed.

The DevExtreme DataGrid’s built-in pager supports full, compact, and adaptive (default) display modes. In compact mode, the pager uses less screen space. In adaptive mode, the DataGrid automatically selects between full and compact modes based on the component width.

The DevExtreme DataGrid also supports external pagers. You can hide the built-in pager and configure a standalone Pagination component to navigate the DataGrid. For additional information, refer to the following example: DevExtreme DataGrid - Display a Pager Above the Grid.