Format Server Response with ServerGrouping in Grid

Environment

Product Progress Kendo UI Grid
Operating System Windows 7 64bit
Browser Google Chrome
Browser Version 62.0.3202.75
Made with 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>
In this article
Not finding the help you need? Improve this article