Search results

Paging

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.

tagHelper
page.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowPaging="true"> 
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

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. Inside this template, you can access the CurrentPage, PageSize, TotalPage and TotalRecordCount values.

tagHelper
page-temp.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource dataBound="data" actionComplete="actionComplete" allowPaging="true">
        <e-grid-pagesettings template="#template" pageSize="7">
        </e-grid-pagesettings>

        <e-grid-columns>
            <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
            <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
            <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
            <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
        </e-grid-columns>
</ejs-grid>

<script>
    function updateTemplate() {
        var numeric;
        var grid = document.getElementByID("Grid").ej2_instances[0];
        numeric = new ej.inputs.NumericTextBox({
            min: 1,
            max: 3,
            step: 1,
            format: '###.##',
            change: function(args) {
                let value = args.value;
                grid.goToPage(value);
            }
        });
        numeric.appendTo('#currentPage');
    };
    var flag = true;
    function dataBound() {
        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 class="col-lg-12 control-section">
            <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();
}

See Also

Contents
Contents