How to implement server side paging with AngularJS

[Ning]

Hi,

I'm implementing Kendo ui grid with AngularJS and Spring Boot Java and can't find any examples on how to implement server side paging or grouping with AngularJS. In my AngularJS controller, I have a a dataSource object which is like this:

 

  var dataSource = new kendo.data.DataSource({
        transport: {
             read:{
                  url:'myData'
             }
        },
        pageSize: 20,
         serverPaging: true,
         serverFiltering: true,
         serverSorting: true,
         schema: {
            total: "total"
         }
 });

$scope.mainGridOptions = {

     dataSource: dataSource,

     pageable: true,

     columns: [.......]

}

 

Do I need to do anything on the server side for server side paging to work? How is server side paging different from client side paging? Right now it's not working for me.

 

Thanks,

Ning

[Boyan Dimitrov]

Hello Ning,

The Grid dataSource must be configured to know where the total count information is provided in the server response. This is achieved via schema.total:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total

If you need to pass parameters with custom names to the data service, then use a parameterMap:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.parameterMap

Note that your data service must return the total count together with the data, not separately. You can check the client requests and server responses in this demo to see this in action:

http://demos.telerik.com/kendo-ui/grid/remote-data-binding

 

Regards,
Boyan Dimitrov
Telerik by Progress

 

 

[Ning]

Hi Dimitrov,

Thanks for your reply. However, it's not very clear what configuring total means even by readin the documentations. Does it mean that I have to return the total count of results from the query like "select count(*) .... as total" and return it via a DAO and a rest controller as part of a JSON to the client side? To do server side grouping, do I need to dynamically add "group by...." in the query in my server side (Java) code? And what does passing parameters with custom names do? It would be great if you could elaborate on your suggestions as not every developer is already familiar with these functions and are able to figure out without details examples. 

 

Thanks,

Ning

[Boyan Dimitrov]

Hello Ning,

When server operations are enabled information from the DataSource is sent from the client to the server about current page, grouping, sorting and etc expressions. In order to modify the request parameters in suitable format for your server you can use the transport.parameterMap. 

The format which DataSource requires the grouped items to be in is similar to the following:

{
  field: "ProductID", //name of the field on which data is grouped
  value: "Product1", // value of the current group
  items: [item1, item2, item3] // items
  hasSubgroups: false, // there are multiple nested groups and items collection contains groups instead of the actual items
  aggregates: []
}

In case your server returns data in a different format, schema object's group function can be use to transform the data. Please refer to the schema.groups article. 

Indeed it expects the total amount of items to be returned as number. as well Since there is serverPaging enabled only items for the current pages will be returned, but it does need information about the number of all records. 

Regards,
Boyan Dimitrov
Telerik by Progress

 

 

[Ning]

Hi Boyan,

Thanks for your reply. But I would like to know more about how the server side is getting the client side information and processing it and doing the grouping on the server side and returning grouping data information back to the client side. I'm using Spring framework with Java. So I would imagine a rest controller has to be used to capture the server grouping request and somehow group the data in the server side and then return to the client side as a JSON? Could you give more explanation on this?

Thanks,

Ning

[Boyan Dimitrov]

Hello Ning,

Specifically to the grouping - please refer to the  example attached to the schema.groups that shows what format should have the result returned by the server. The DataSource will expect such format returned by the server to understand the grouping correctly. 

Regarding the information sent from the client to the server the transport.parameterMap should be used in order to sent the information in suitable format. 

Regards,
Boyan Dimitrov
Telerik by Progress