Как сделать группировку серверов с использованием сетки кендо? Какой ожидаемый формат JSON?

Я пытаюсь использовать группировку серверов в сетке.

Я не уверен в разнице между "schema.groups" и "schema.data". Я понимаю, что я должен использовать shema.data, когда данные не сгруппированы, и schema.groups, когда данные сгруппированы. Я попытался привести очень простой пример с ajax-запросом к файлу data.json для имитации ответа сервера. Просто поместите файлы testGrouping.html и data.json в корень любого http-сервера, чтобы воспроизвести мою проблему.

Когда я запускаю данный код, у меня нет ошибки, но сетка остается пустой. Я ожидаю, что сетка покажет 1 группу с 5 строками без какой-либо совокупности.

Не могли бы вы помочь найти, что не так в данном примере?

Спасибо за помощь.

Вот HTML-страница, которую я использую (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>

И данные, используемые здесь для имитации ответа сервера (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": {}
}]
}
Источник

0 ответов

Я боролся с этим в течение нескольких дней, но в итоге я заработал, используя https://docs.telerik.com/kendo-ui/knowledge-base/grid-format-of-the-response-with-server-grouping и https://docs.telerik.com/kendo-ui/framework/datasource/basic-usage для справки

Установите свойство schema.groups источника данных для функции, возвращающей свойство ответа, содержащее группы

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

Верните следующий формат с вашего сервера

Groups = [
   {
      field: "GroupField",
      value: "Group1",
      items: [],
      aggregates: {},
      hasSubgroup: false
   },
   {
      field: "GroupField",
      value: "Group2",
      items: [],
      aggregates: {},
      hasSubgroup: false
   }
]
Источник
Другие вопросы по тегам