The DevExtreme DataGrid supports data paging. The component can load rows in chunks to improve performance when working with large data sets. This demo allows you to navigate between pages using the DataGrid pager.
You can use controls below the DataGrid to change pager display mode and toggle the visibility of individual pager elements. Note: navigation buttons are always visible in compact mode.
The built-in pager contains the following elements:
Page navigator
Enables page navigation.
Page size selector
Changes the 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 the current page number and total record count. To display page information, enable the showInfo property. You can customize this information text as needed.
The 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 chooses 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.
@(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;
}