Paging
21 Dec 20227 minutes to read
Paging provides an option to display Grid data in page segments. To enable paging, set the AllowPaging to true. When paging is enabled, pager component renders at the bottom of the grid. Paging options can be configured through the PageSettings.
In the below sample, pageSize is calculated based on the grid height by using the Load event.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("325").Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).AllowPaging().Load("load").Render()
<script>
function load() {
var grid = document.getElementById('Grid').ej2_instances[0];
var rowHeight = grid.getRowHeight(); //height of the each row
var gridHeight = grid.height; //grid height
var pageSize = grid.pageSettings.pageSize; //initial page size
var pageResize = (gridHeight - (pageSize * rowHeight)) / rowHeight; //new page size is obtained here
grid.pageSettings.pageSize = pageSize + Math.round(pageResize);
}
</script>public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}NOTE
You can achieve better performance by using grid paging to fetch only a pre-defined number of records from the data source.
Template
You can use custom elements inside the pager instead of default elements. The custom elements can be defined by using the Template property of PageSettings. Inside this template, you can access the CurrentPage, PageSize, TotalPage and TotalRecordCount values.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).AllowPaging().PageSettings(page => { page.PageSize(7).Template("#template"); }).ActionComplete("actionComplete").DataBound("dataBind").Render()
<script>
function updateTemplate() {
var numeric;
var grid = document.getElementById("Grid").ej2_instances[0];
numeric = new ej.inputs.NumericTextBox({
min: 1,
max: 3,
step: 1,
width: 100,
format: '###.##',
change: function (args) {
let value = args.value;
grid.goToPage(value);
}
});
numeric.appendTo('#currentPage');
};
var flag = true;
function dataBind() {
if (flag) {
flag = false;
updateTemplate();
}
}
function actionComplete(args) {
if (args.requestType === 'paging') {
updateTemplate();
}
}
</script>
<script id="template" type="text/x-template">
<div class="e-pagertemplate">
<div>
<div class="content-wrapper">
<input id="currentPage" type="text" value=${currentPage}>
</div>
</div>
<div id="totalPages" class="e-pagertemplatemessage" style="margin-top:5px;margin-left:30px;border: none; display: inline-block ">
<span class="e-pagenomsg">${currentPage} of ${totalPages} pages (${totalRecordsCount} items)</span>
</div>
</div>
</script>public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}Pager with Page Size Dropdown
The pager Dropdown allows you to change the number of records in the Grid dynamically. It can be enabled by defining the PageSizes property of PageSettings as true.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).AllowPaging().PageSettings(page=> { page.PageSizes(true); }).Render()public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}How to render Pager at the Top of the Grid
By default, Pager will be rendered at the bottom of the Grid. You can also render the Pager at the top of the Grid by using the DataBound event.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).AllowPaging().DataBound("dataBound").Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
<script>
var initialGridLoad = true;
function dataBound() {
if (initialGridLoad) {
initialGridLoad = false;
var pager = document.getElementsByClassName('e-gridpager');
var toolbar = document.getElementsByClassName('e-toolbar');
this.element.insertBefore(pager[0], toolbar[0]);
}
}
</script>public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}NOTE
During the paging action, the pager component triggers the below three events.
The created event triggers when Pager is created.
The click event triggers when the numeric items in the pager is clicked.
The dropDownChanged event triggers when pageSize DropDownList value is selected.