Angular Kendo Grid - Server Pagination

Question

I need to implement server pagination in an Angular-Kendo grid. I could not figure out how to do this from Angular.

Can anyone help?

Answer 1

With the newest version of Kendo UI (now in Beta), there is another way that we can implement server-side swapping using the $http.post Angular method provides a Kendo table read function.

This is an example of using MVC 5 as an endpoint for data that you receive from a data source. It simulates a server swap by sending page and pageSize to the controller, you can also send take and skip , if necessary, and process it as you like.

HTML markup

 <div ng-controller="MyCtrl"> <kendo-grid k-options="mainGridOptions"></kendo-grid> </div> 

Javascript

 function MyCtrl($scope, $http) { $scope.mainGridOptions = { dataSource: { schema: { data: "Data", total: "Total" }, transport: { read: function (e) {//You can get the current page, pageSize etc off `e`. var requestData = { page: e.data.page, pageSize: e.data.pageSize, type: "hello" }; console.log(e); $http({ method: 'POST', url: 'Home/DataSourceResult', data: requestData }). success(function (data, status, headers, config) { e.success(data); //console.log(data.Data); }). error(function (data, status, headers, config) { alert('something went wrong'); console.log(status); }); } }, pageSize: 1, serverPaging: true, serverSorting: true }, selectable: "row", pageable: true, sortable: true, groupable: true } } 

You can get the current pageSize, page, accept, skip, and more from the e argument in the read: function(e){} declaration.

Because post values ​​refer to arguments from the read function, they are updated every time the page is refreshed in the grid. This is what you can use to update your message values ​​every time the grid makes changes. Then the mesh is re-linked.

Home / DataSourceResult Controller

 [HttpPost] public ActionResult DataSourceResult(int page, string type, int pageSize) { ResponseData resultData = new ResponseData(); string tempData = ""; if (page == 1) { tempData = "[{\"NAME\": \"Example Name 1\", \"DESCRIPTION\": \"Example Description 1\"},{\"NAME\": \"Example Name 2\",\"DESCRIPTION\": null}]"; } else if (page == 2) { tempData = "[{\"NAME\": \"Example Name 3\", \"DESCRIPTION\": \"Example Description 3\"},{\"NAME\": \"Example Name 4\",\"DESCRIPTION\": \"Example Description 4\"}]"; } resultData.Data = tempData; resultData.Total = "4"; string json = JsonConvert.SerializeObject(resultData); json = json.Replace(@"\", ""); json = json.Replace("\"[{", "[{"); json = json.Replace("}]\"", "}]"); return Content(json, "application/json"); } 

Very simple, but exactly what I need and can help you. This uses the built-in Angular http.get function, but allows the Kendo grid to do most of your heavy lifting.

Answer 2

Kendo's grid has built-in server-side paging, at least it has a convenient built-in API to help out there, so you just need to hook all the parts. Here is what I came up with, my grid source:

 $scope.myGrid.dataSource = new kendo.data.DataSource({ transport:{ read:{ url: '/api/mygridapi?orderId=113', dataType: 'json' } }, pageSize: 5, serverPaging: true, serverSorting: true, serverFiltering: true, serverGrouping: true, serverAggregates: true, schema:{ total: function(response) { return 13; // call some function, or some scope variable that know the total items count }, model: { id: "id", fields: { 'id': { type: "number", editable: false }, 'name': { type: "string", editable: true, nullable: false, validation: { required: true } }, 'price': { type: "number", editable: true, nullable: false, validation: { required: true } }, } } } }); 

and my grid markup:

 <div kendo-grid k-pageable='{ "pageSize": 5, "refresh": true, "pageSizes": false }' k-height="'250px'" k-column-menu="false" k-filterable="true" k-sortable="true" k-groupable="true" k-data-source="myGrid.dataSource" k-options="{{myGrid.gridOpts}}" k-on-change="onSelectHandler(kendoEvent)"> 

and my web controller api:

 [System.Web.Http.HttpGet] public IEnumerable<ProductsDTO> Get(int orderId) { NameValueCollection nvc = HttpUtility.ParseQueryString(Request.RequestUri.Query); //the name value captures the paging info that kendo automatically appends to the query string when it requests data //it has info such as teh current page, page size etc.... int take = int.Parse(nvc["take"]); int skip = int.Parse(nvc["skip"]); return productsSvc.GetProductsOfOrder(orderId,skip,take); } 

My service returns IQueryable , but it can also return a specific list, since returning IQueryable did nothing to help Kendo figure out how many items there were. The main problem for me was that the grid did not understand the correctness of counting the number of objects, for example, the first page will be displayed (the first 5 elements), however, the remaining elements were not noticed, and as a result of the paging button, the grids were disabled, so I somehow hacked it, but manually set the total number of elements, these were the following lines of code:

 schema:{ total: function(response) { return 13; // call some function, or some scope variable that know the total items count },......... 

One thing that bothers me is to set the total item count manually. It is worth mentioning that when setting up the data source, you can pass the function to the read property of the transport object, this function will have an object containing the current paging / filtering information as a parameter, so you can use it to build the query string manually, rather than relying on the request kendo server default:

 transport: { read: function (options) { console.log(options);//see whats inside //we can use the pageNo and pageSize property to create a query string manually } }