Paging

5 Apr 201810 minutes to read

The grid records can be displayed in paged view, by setting the allow-paging property as true.

The code snippet to enable paging is as follows.

RAZOR

<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.DataSource">
        <e-columns>
            <e-column field="OrderID" header-text="Order ID"></e-column>
            <e-column field="EmployeeID" header-text="Employee ID"></e-column>
            <e-column field="CustomerID" header-text="Customer ID"></e-column>
            <e-column field="ShipCountry" header-text="Ship Country"></e-column>
            <e-column field="Freight" header-text="Freight"></e-column>
        </e-columns>
   </ej-grid>

C#

namespace MVCSampleBrowser.Controllers
          {
            public class GridController : Controller
              { 
                public IActionResult GridFeatures()
                 {
                   var DataSource = new NorthwindDataContext().OrdersViews.ToList();
                   ViewBag.DataSource = DataSource;
                   return View();
                 }
             }
        }

The following output is displayed as a result of the previous code example.

Pager with query string

You can pass the current page information as a query string while navigating to other page. To enable query string, set the enable-query-string property of e-page-settings as true.

The following code example describes the previous behavior.

RAZOR

<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.DataSource">
        <e-page-settings enable-query-string="true"> </e-page-settings>
        <e-columns>
            <e-column field="OrderID" header-text="Order ID"></e-column>
            <e-column field="EmployeeID" header-text="Employee ID"></e-column>
            <e-column field="CustomerID" header-text="Customer ID"></e-column>
            <e-column field="ShipCountry" header-text="Ship Country"></e-column>
            <e-column field="Freight" header-text="Freight"></e-column>
        </e-columns>
   </ej-grid>

C#

namespace MVCSampleBrowser.Controllers
          {
            public class GridController : Controller
              { 
                public IActionResult GridFeatures()
                 {
                   var DataSource = new NorthwindDataContext().OrdersViews.ToList();
                   ViewBag.DataSource = DataSource;
                   return View();
                 }
             }
        }

The following output is displayed as a result of the previous code example.

## Pager template

Apart from default pager, there is an option to render a specific custom template in a grid pager. To render template in pager, set the enable-templates as true. The HTML templates can be specified in the template property of e-page-settings.

To prevent the display of default pager, enable the pager template by setting the show-defaults property of the e-page-settings as false.

NOTE

It’s a standard way to enclose the template within the script tag with type as “text/x-jsrender”.

The following code example describes the previous behavior.

RAZOR

<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.DataSource" create="create">
        <e-page-settings enable-templates="true" template="#template" show-defaults="false"></e-page-settings>
        <e-columns>
            <e-column field="OrderID" header-text="OrderID"></e-column>
            <e-column field="EmployeeID" header-text="EmployeeID"></e-column>
            <e-column field="ShipCity" header-text="ShipCity"></e-column>
            <e-column field="ShipCountry" header-text="ShipCountry"></e-column>
            <e-column field="Freight" header-text="Freight" format="{0:C}"></e-column>
        </e-columns>
   </ej-grid>

C#

namespace MVCSampleBrowser.Controllers
          {
            public class GridController : Controller
              { 
                public IActionResult GridFeatures()
                 {
                   var DataSource = new NorthwindDataContext().OrdersViews.ToList();
                   ViewBag.DataSource = DataSource;
                   return View();
                 }
             }
        }

JS

<script id="template" type="text/x-jsrender">
            <input id="currentPage" type="text" style="text-align: center; width: 32px; height: 21px; background: white;" value="1" />
            <label>of 200</label>
            <button id="btn">Go to</button>
          </script>
          <script>
            function create(args) {
                     $("#btn").ejButton({
                       click : "btnClick"
                         });
                   }
             function btnClick(args) {
                     var val = $("#currentPage").val();
                     var gridObj = $("#Grid").data("ejGrid");
                      gridObj.gotoPage(args.val);
                  }
           </script>

CSS

.e-grid .e-pager .e-pagercontainer {
	       border-width: 0px;
	       overflow: visible;
         }

The following output is displayed as a result of the previous code example.

Pager with pageSettings

The default page settings can be customized, such as the pageCount, pageSize of the grid’s pager by using pageSettings property of grid control.

The following code example describes the previous behavior.

HTML

<div id="Grid"></div>

JAVASCRIPT

$(function () {
	$("#Grid").ejGrid({
		//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
        dataSource: window.gridData,
        allowPaging: true,
        pageSettings: { pageSize: 8, pageCount:3}
    });
});

The following output is displayed as a result of the previous code example.