Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
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 Newtonsoft.Json;
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 pager is configured in the pager object and 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 the allowedPageSizes and specify the initial pageSize in the paging object. -
Page information
Displays the current page number and total record count. To display page information, enable the showInfo property. You can also use the infoText property to customize the information text string.
The pager supports full, compact, and adaptive (default) display modes. In compact mode, the pager changes the appearance of the page navigator and page selector to use screen space more efficiently. In adaptive mode, the pager automatically chooses between the full and compact modes based on the DataGrid's width. Use the displayMode property to switch between modes.
In this demo, you can use the drop-down Display Mode menu to switch between full and compact display modes. You can also use the checkboxes to hide or display different pager elements. Note that when the pager is in compact mode, navigation buttons are always visible.