Issues using: Grid / Grouping / Sort / Remote data

6 posts, 0 answers
  1. El Nacho
    El Nacho avatar
    16 posts
    Member since:
    May 2014

    Posted 14 Mar 2017 Link to this post

    We are implementing the Grouping feature in our grids and we've found some issues related to the Sorting while a grid is groupíng. We see also different behaviors at the demos between doing the binding to local data and remote data.

    [NOTE: We are binding to remote data.]

    The issues are the following: 

    *** ISSUE 1: Grouping is not sorting by default
    From the initial state of the grid, if we do a column grouping, the grouping is not applying the sort. The grid is grouping only the elements that we see at the page where are.

    Repro steps:
    1) Open the following Dojo from the Kendo UI demo of the remote data grid: http://dojo.telerik.com/uFeHo 
    2) With the default state of the grid, pick the column of Ship City for grouping
    3) See the elements of the group of Albuquerque (just one)
    4) Sort by the Ship City column
    5) See that the elements of the group of Albuquerque are more than one
    6) See also that the first group is not Alburquerque, now it's Aachen

    Expectation:
    Please try the same using the demo of the local data grid: http://dojo.telerik.com/iRoLa

    *** ISSUE 2: Grouping sort is ordering only the page where we are

    Repro steps:
    1) Open the following Dojo from the Kendo UI demo of the remote data grid: http://dojo.telerik.com/uFeHo 
    2) With the default state of the grid, pick the column of Ship City for grouping
    3) Press the chip of the grouping to change the grouping sort

    Expectation:
    Please try the same using the demo of the local data grid: http://dojo.telerik.com/iRoLa

    *** ISSUE 3: Grid allows to apply column sort while the column is used for grouping

    Repro steps:
    1) Open the following Dojo from the Kendo UI demo of the remote data grid: http://dojo.telerik.com/uFeHo 
    2) With the default state of the grid, pick the column of Ship City for grouping
    3) Press the Ship City column header for sort

    Expectation:
    Please try the same using the demo of the local data grid: http://dojo.telerik.com/iRoLa

    (!) IMPORTANT
    Grouping is a required feature that is critical for us...
    How expensive is a workaround to disable the sort of the grouping element and fix the default sorting when the grouping is used?

  2. Stefan
    Admin
    Stefan avatar
    2887 posts

    Posted 16 Mar 2017 Link to this post

    Hello Joseph,

    All of the described issues occur because the example is using server operations for paging and sorting, but not for grouping. When serverPaging has used the Grid will request the data only for the specific page, but as the grouping is made client side, it will be made only of the available items on the page, as it does not have all of the data available.

    In this scenario I can suggest two approaches:

    1) Enable serverGrouping as well. Please have in mind that this will require additional code on the server that will handle the request and return the grouped data in the expected format:

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

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

    2) To remove the other server operations and have all of them on the server. The Grid will still be with a remote data, but the operations will be done on the client(the Grid will request all of the data at once):

    http://dojo.telerik.com/uFeHo/3

    Please have in mind that we recommend all operations to be done either on the client or on the server as mixing them can lead to the described issues and more.

    I hope this will help to achieve the desired result.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. El Nacho
    El Nacho avatar
    16 posts
    Member since:
    May 2014

    Posted 17 Mar 2017 in reply to Stefan Link to this post

    Thanks Stefan for your answer!

    The approach that matches with what we need is the first one. I get that we have to set the serverGrouping as true, and the response, but could you pass me an example about how should be the entire response? 

    I did the following and I couldn't make it work:

    1) Set serverGrouping = true
    2) Set the schema groups as a function
    3) I'm returning an object like { Data: { groups: [(***)here's how's the tutorial says] }, Total: total items }

    (***) The tutorial I mean the following: http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.groups
    Where it says: "The result should have the following format:..."

    Thanks a lot!

  4. El Nacho
    El Nacho avatar
    16 posts
    Member since:
    May 2014

    Posted 17 Mar 2017 in reply to Stefan Link to this post

    Thanks Stefan for your answer!

    From the two approaches you mentioned, the first one is the one that matches with what we need. We definitely need to do the grouping at the server because we do the paging, sort and filtering there too. 

    I tried to apply it but I couldn't make it work. What I did was the following:

    1) Set serverGrouping as true
    2) Set schema groups as function
    3) I'm doing a response like the tutorial says (http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.groups)

    I think the problem is that I don't know exactly how must be the response. The response that I'm doing is like:

    { Data: { groups: [array of groups like the tutorial says] }, Total: TotalOfItems }

    The errors I'm getting are the following:

    TypeError: Cannot read property 'length' of undefined
        
    at S (http://localhost:8181/atlas/Scripts/kendo/kendo.all.min.js:27:1209) 
    at init.flatView (http://localhost:8181/atlas/Scripts/kendo/kendo.all.min.js:27:23755)
    at init.dataItems (http://localhost:8181/atlas/Scripts/kendo/kendo.all.min.js:26:1282)
    at init.dataItems (http://localhost:8181/atlas/Scripts/kendo/kendo.all.min.js:49:3011)
    at AtlasDataTablePager.self.isDataTableEmpty (http://localhost:8181/atlas/App/directives/atlasdatatable/atlas.datatable.js:607:25)
    at fn0 (eval at compile (http://localhost:8181/atlas/Scripts/angular.js:13322:15), <anonymous>:4:620)
    at Object.expressionInputWatch [as get] (http://localhost:8181/atlas/Scripts/angular.js:14302:31)
    at Scope.$digest (http://localhost:8181/atlas/Scripts/angular.js:15818:40)
    at Scope.$apply (http://localhost:8181/atlas/Scripts/angular.js:16097:24)
    at http://localhost:8181/atlas/Scripts/angular.js:17864:36 undefined

    So my question is: How must be the exact response?

    Thanks a lot!

  5. El Nacho
    El Nacho avatar
    16 posts
    Member since:
    May 2014

    Posted 17 Mar 2017 in reply to Stefan Link to this post

    Thanks Stefan for your answer!

    From the two approaches you mentioned, the first one is the one that matches with what we need. We definitely need to do the grouping at the server because we do the paging, sort and filtering there too. 

    I tried to apply it but I couldn't make it work. What I did was the following:

    1) Set serverGrouping as true
    2) Set schema groups as function
    3) I'm doing a response like the tutorial says (http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.groups)

    I think the problem is that I don't know exactly how must be the response. The response that I'm doing is like:

    { Data: { groups: [array of groups like the tutorial says] }, Total: TotalOfItems }

    The errors I'm getting are the following:

    TypeError: Cannot read property 'length' of undefined
    at S (http://localhost:8181/atlas/Scripts/kendo/kendo.all.min.js:27:1209)
    at init.flatView (http://localhost:8181/atlas/Scripts/kendo/kendo.all.min.js:27:23755)
    at init.dataItems (http://localhost:8181/atlas/Scripts/kendo/kendo.all.min.js:26:1282)
    at init.dataItems (http://localhost:8181/atlas/Scripts/kendo/kendo.all.min.js:49:3011)
    at AtlasDataTablePager.self.isDataTableEmpty (http://localhost:8181/atlas/App/directives/atlasdatatable/atlas.datatable.js:607:25)
    at fn0 (eval at compile (http://localhost:8181/atlas/Scripts/angular.js:13322:15), <anonymous>:4:620)
    at Object.expressionInputWatch [as get] (http://localhost:8181/atlas/Scripts/angular.js:14302:31)
    at Scope.$digest (http://localhost:8181/atlas/Scripts/angular.js:15818:40)
    at Scope.$apply (http://localhost:8181/atlas/Scripts/angular.js:16097:24)
    at http://localhost:8181/atlas/Scripts/angular.js:17864:36 undefined

    So my question is: How must be the exact response?

    Thanks a lot!
  6. Stefan
    Admin
    Stefan avatar
    2887 posts

    Posted 21 Mar 2017 Link to this post

    Hello Joseph,

    I can suggest the following forum threads, as they contain examples of the expected response and also runnable samples:

    http://www.telerik.com/forums/remote-binding-with-servergrouping-example

    http://www.telerik.com/forums/grouping-and-aggregates-with-serverpaging-on-grid
    I will link the expected JSON from the provided links:

     - The expected JSON based on the example in the thread. There is also attached runnable Visual Studio example:

    http://pastebin.com/CPetyP5Y

    - The second link also has a runnable example with the expected JSON:

    http://jsfiddle.net/knWcJ/74/

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top