Paging in EJ 1 ASP.NET MVC DataManager

11 Aug 2017 / 3 minutes to read

Paging is a very important query in the DataManager used to display only some records from the large data source. Here, you can learn the paging query in detail.

Default

The paging index and the paging size parameters of the paging query determine the number of records to be retrieved from the data source of the DataManager.

Refer to the following code example for the paging options.

  • cshtml
  • @(Html.EJ().DataManager("FlatData").URL("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders"))
    @(Html.EJ().Grid<MVCdoc.OrdersView>("FlatGrid")
    	.DataManagerID("FlatData")
    	.Query("new ej.Query().page(5,5)")
    	.Columns(col =>
    	{
    		col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
    		col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
    		col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();
    		col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
    		col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();
    	})
    )

    Result for the above code example is illustrated as follows.

    Paging_img1

    Paging

    Dynamic Paging

    The paging operation can be dynamically performed by using the DataManager. With the help of an external button click event, the required page records can be obtained and processed accordingly. The following code example illustrates the dynamic paging.

    @Html.EJ().DataManager("FlatData").URL("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/").CrossDomain(true))
    
    	@(Html.EJ().Grid<MVCdoc.OrdersView>("FlatGrid")
    		.DataManagerID("FlatData")
    		.Query("new ej.Query().select(['OrderID', 'CustomerID', 'EmployeeID', 'ShipCity', 'Freight']).page(1,3)")
    		.Columns(col =>
    		{
    			col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
    			col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
    			col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();
    			col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
    			col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();
    		})
    	)
    
    	pageIndex: <input id="pageIndex" type="text" placeholder="pageIndex" />
    
    	pageSize:  <input id="pageSize" type="text" placeholder="pageSize" />
    
    	@Html.EJ().Button("submit").Text("Execute").ClientSideEvents(e => { e.Click("onClick"); })
    
    
    	<script type="text/javascript" class="jsScript">
    
    		function onClick(e) {
    			var from = parseInt($("#pageIndex").val());
    			var to = parseInt($("#pageSize").val());
    			var obj = $("#FlatGrid").ejGrid("instance")
    			tempQuery = new ej.Query();
    			tempQuery.page(from, to);
    			var dataManagerObj = window.FlatData.executeQuery(tempQuery).done(function (e1) {
    				obj.dataSource(e1.result);
    			})
    		}
    
    	</script>

    Result of above code example is illustrated as follows.

    Paging_img2

    Dynamic Paging

    Custom paging

    In this section, you can learn how to use the customized paging. The following code example illustrates the custom paging.

  • cshtml
  • @(Html.EJ().DataManager("FlatData").URL("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders"))
    
    	@(Html.EJ().Grid<MVCdoc.OrdersView>("FlatGrid")
    		.DataManagerID("FlatData")
    		.Query("new ej.Query().select('OrderID', 'CustomerID', 'EmployeeID', 'Freight', 'ShipCity').addParams('PageNumber',7).addParams('PageSize',3).where('CustomerID', 'contains', 'A', false)")
    		.Columns(col =>
    		{
    			col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
    			col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
    			col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();
    			col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
    			col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();
    		})
    	)

    Result of above code example is illustrated as follows.

    Paging_img3

    Custom Paging

    Skip

    The skip query is used to skip some number of records.

  • cshtml
  • @(Html.EJ().DataManager("FlatData").URL("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders"))
    
    	@(Html.EJ().Grid<MVCdoc.OrdersView>("FlatGrid")
    		.DataManagerID("FlatData")
    		.Query("new ej.Query().select('OrderID', 'CustomerID', 'EmployeeID', 'Freight', 'ShipCity').skip(100).take(5)")
    		.Columns(col =>
    		{
    			col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
    			col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
    			col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();
    			col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
    			col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();
    		})
    	)

    Result of the above code example is illustrated as follows.

    Paging_img4

    By using Skip

    Take

    The take query is used to get some number of records from the data source of the DataManager.

  • html
  • @(Html.EJ().DataManager("FlatData").URL("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders"))
    	@(Html.EJ().Grid<MVCdoc.OrdersView>("FlatGrid")
    		.DataManagerID("FlatData")
    		.Query("new ej.Query().select('OrderID', 'CustomerID', 'EmployeeID', 'Freight', 'ShipCity').take(3)")
    		.Columns(col =>
    		{
    			col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
    			col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
    			col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();
    			col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
    			col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();
    		})
    	)

    Result of the above code example is illustrated as follows.

    Paging_img5

    By using take

    RequiresCount

    The requiresCount query is used to get the count of the total number of records in the data source of the DataManager.

  • cshtml
  • @(Html.EJ().DataManager("FlatData").URL("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders"))
    	@(Html.EJ().Grid<MVCdoc.OrdersView>("FlatGrid")
    		.DataManagerID("FlatData")
    		.Query("new ej.Query().select('OrderID', 'CustomerID', 'EmployeeID', 'Freight', 'ShipCity').page(1,3).requiresCount()")
    		.Columns(col =>
    		{
    			col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
    			col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
    			col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();
    			col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
    			col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();
    		})
    
    	)

    Result of the above code example is illustrated as follows.

    Paging_img6

    By using requireCount

    Range

    The range query is used to get some particular range of records from the data source of the DataManager.

  • cshtml
  • @(Html.EJ().DataManager("FlatData").URL("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders"))
    	@(Html.EJ().Grid<MVCdoc.OrdersView>("FlatGrid")
    		.DataManagerID("FlatData")
    		.Query("new ej.Query().select('OrderID', 'CustomerID', 'EmployeeID', 'Freight', 'ShipCity').range(25,30)")
    		.Columns(col =>
    		{
    			col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
    			col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
    			col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();
    			col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
    			col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();
    
    		})
    	)

    Result of the above code example is illustrated as follows.

    Paging_img7

    By using range