How to do server grouping using kendo grid ? What is the expected json format?

Question

I'm trying to use server grouping in a grid.

I'm not sure about the difference between "schema.groups" and "schema.data". I understand that i should use shema.data when data are not grouped, and schema.groups when data are grouped. I tryied to provide a very simple example, with a ajax request to a data.json file to simulate a server response. Just drop the testGrouping.html and data.json files in the root of any http server to reproduce my problem.

When i run the given code, i have no error, but the grid remains empty. I expect the grid to show 1 group with 5 lines, without any aggregate.

Could you help to find what's wrong in the given sample ?

Thank you for your help.

Here is the html page i'm using (testGrouping.html) :

<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js">    </script>
</head>
<body>

    <div id="example">
        <div id="grid"></div>
        <script>
            $(document).ready(function() {
                $("#grid").kendoGrid({
                    dataSource: {
                        transport: {
                            read: {
                                url: "data.json?x=1",
                                cache:false,
                                type: 'GET',
                                dataType: 'json',
                                contentType: "application/json"
                            },
                        },
                        error: function(e) {
                          console.log(e.errors); // displays "Invalid query"
                        },
                        schema:{
                          // "data":"titi",
                          "groups":"groups",
                          "total": "total",
                          "model": {
                            "fields": [
                              {
                                "field": "m2"
                              },
                              {
                                "field": "m"
                              },                                  
                            ]
                          }
                        },
                        pageSize: 7
                    },
                    sortable: true,
                    scrollable: false,                        
                    pageable: true,
                    serverPaging: true,
                    serverAggregates: true,
                    serverFiltering: true,
                    serverGrouping: true,
                    serverSorting: true,
                    columns: [
                      {
                        "field": "m2",
                        "title": "Group odd / even"
                      },
                      {
                        "field": "m",
                        "title": "Month"
                      }
                    ]
                });
            });
        </script>
    </div>

And data used here to simulate server response (data.json) :

{
"total":1,
"groups":
 [ {
  "aggregates": [],
  "value": "rrr",
  "hasSubgroups": false,
  "field": "m2",      
  "items": [
    {
      "m2": "rrr",
      "m": 1
    },
    {
      "m2": "rrr",
      "m": 1
    },
    {
      "m2": "rrr",
      "m": 1
    },
    {
      "m2": "rrr",
      "m": 1
    },
    {
      "m2": "rrr",
      "m": 1
    }
  ],
  "aggregates": {}
}]
}

Are you still looking for answer to this? – Damian Aug 09 '18 at 06:39 — Damian, Aug 09 '18 at 06:39
I am also looking for an answer. – nowox Dec 09 '18 at 12:12 — nowox, Dec 09 '18 at 12:12

score 1 · Answer 1 · answered Apr 02 '19 at 11:37

I've been fighting with this for a couple of days now but I got it working eventually using https://docs.telerik.com/kendo-ui/knowledge-base/grid-format-of-the-response-with-server-grouping and https://docs.telerik.com/kendo-ui/framework/datasource/basic-usage#server-grouping for reference

Set the schema.groups property of the datasource to a function returning the response property that contains the groups

schema: {
   groups: function (e) {
      return e.Groups;
   }
}

Return the following format from your server

Groups = [
   {
      field: "GroupField",
      value: "Group1",
      items: [],
      aggregates: {},
      hasSubgroup: false
   },
   {
      field: "GroupField",
      value: "Group2",
      items: [],
      aggregates: {},
      hasSubgroup: false
   }
]

How to do server grouping using kendo grid ? What is the expected json format?

1 Answers1