How to implement server side paging with AngularJS

6 posts, 0 answers
  1. Ning
    Ning avatar
    6 posts
    Member since:
    Jun 2016

    Posted 28 Jul Link to this post

    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

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 01 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Ning
    Ning avatar
    6 posts
    Member since:
    Jun 2016

    Posted 01 Aug in reply to Boyan Dimitrov Link to this post

    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

  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 03 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  6. Ning
    Ning avatar
    6 posts
    Member since:
    Jun 2016

    Posted 04 Aug in reply to Boyan Dimitrov Link to this post

    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

  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 08 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready