Format Server Response with ServerGrouping in Grid

Updated on Dec 10, 2025

Environment

Product	Progress® Kendo UI® Grid for jQuery
Operating System	Windows 7 64bit
Browser	Google Chrome
Browser Version	62.0.3202.75
Product Version	2017.3.1026

Description

How can I format the server response when serverGrouping in the Grid is set to true?

Solution

Parse the server response and group the Grid.

To view the expected format, refer to this demo.

   <div id="grid"></div>
    <script>
      $(document).ready(function() {

        $("#grid").kendoGrid({
          dataSource: {
            transport: {
              read: function(options) {
                var response = {};
                response.group = [{
                  field: "companyName",
                  value: "the name of company",
                  items: [{
                    id: "1",
                    contractName: "name of contract",
                    companyName: "the name of company"
                  },{
                    id: "2",
                    contractName: "name of contract number 2",
                    companyName: "the name of company"
                  },{
                    id: "3",
                    contractName: "name of contract number 3",
                    companyName: "the name of company"
                  }],
                  hasSubgroups: false,
                  aggregates: []
                }];

                response.data = [{
                  id: "1",
                  contractName: "name of contract",
                  companyName: "the name of company"
                },{
                  id: "2",
                  contractName: "name of contract number 2",
                  companyName: "the name of company"
                },
                                 {
                                   id: "3",
                                   contractName: "name of contract number 3",
                                   companyName: "the name of company"
                                 }
                                ]
                response.total = 3
                options.success(response);
              }
            },
            pageSize: 100,
            serverPaging: true,
            serverSorting: true,
            serverGrouping: true,
            serverAggregates: true,
            group: {
              field: "companyName"
            },
            schema: {
              data: function(e) {
                return e.data;
              },
              groups: function(e) {
                return e.group;
              },
              total: function(e) {
                return e.total;
              },
              parse: function(response) {
                //Data group

                var groups = response.group;
                var contractGroup = [];
                for(var i = 0; i < groups.length; i++) {
                  var group = groups[i];
                  var items = group.items;
                  var contracts = [];
                  for(var j = 0; j < items.length; j++) {
                    var item = items[j];
                    var contract = {
                      id: item.id,
                      contractName: item.contractName,
                      companyName: item.companyName
                    }
                    contracts.push(contract);
                  }
                  group.items = contracts;
                  contractGroup.push(group);
                }
                response.group = contractGroup;
                //Data group end

                //Data default
                var datas = response.data;
                var contracts = [];
                for(var i = 0; i < datas.length; i++) {
                  var data = datas[i];
                  var contract = {
                    id: data.id,
                    contractName: data.contractName,
                    companyName: data.companyName
                  }
                  contracts.push(contract);
                }
                response.data = contracts;
                //Data default end
                return response;
              },
              model: {
                id: "id",
                fields: {
                  costCodeName: { type: "string" },
                  contractName: { type: "string" },
                  companyName: { type: "string" },
                }
              }
            },
          },       
          height: 780,
          scrollable: true,
          sortable: false,
          pageable: true,
        });
      })
    </script>