Grouping

To generate grouped data on the server, make sure about the data format that is expected by the DataSource.

Local Grouping of Data

Local grouping is convenient for small datasets.

The following example demonstrates how to locally group and handle the grouped data which is logged in the console after grouping is applied.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="localDataSource"
                    :group-field="'category'"
                    :group-dir="'desc'"
                    :data="localData"
                    :schema-data="'items'">
    </kendo-datasource>
</div>
Vue.use(DataSourceInstaller);

new Vue({
  el: '#vueapp',
  data: function() {
    return {
      localData: {
          'count': 2,
          'input': 'kendo',
          'items': [
            { name: "Tea", category: "Beverages"},
            { name: "Ham", category: "Food"},
          ]
      }
    }
  },
    methods: {
        logData: function() {
          var ds = this.$refs.localDataSource.kendoWidget();
          ds.fetch();
          console.log(ds.view()[0]);
          console.log(ds.view()[1]);
        }
    },
    mounted: function() {
        this.logData();
    }
})

Server Grouping of Data

Server grouping is convenient for large datasets. To apply server grouping of data, set the schema and the group properties.

The following example demonstrates how to group data on the server and handle the grouped data which is logged in the console after grouping is applied. Note that the data which is returned by the transport is evaluated in the same way.

<div id="vueapp">
    <kendo-datasource ref="localDataSource"
                    :group-field="'category'"
                    :data="localData"
                    :server-grouping="true"
                    :schema-data="'items'"
                    :schema-groups="'groups'">
    </kendo-datasource>
</div>
Vue.use(DataSourceInstaller);

new Vue({
  el: '#vueapp',
  data: function() {
    return {
      localData: {
          'count': 4,
          'input': 'kendo',
          'groups': [{
              'field': 'category',
              'value': 'Food',
              'items': [
                { name: "Bread"},
                { name: "Ham"},
              ],
              'hasSubgroups': false,
              'aggregates': {}
          },{
              'field': 'category',
              'value': 'Beverages',
              'items': [
                { name: "Tea"},
                { name: "Coffee"},
              ],
              'hasSubgroups': false,
              'aggregates': {}
          }]
      }
    }
  },
    methods: {
        logData: function() {
          var ds = this.$refs.localDataSource.kendoWidget();
          ds.fetch();
          console.log(ds.view()[0]);
          console.log(ds.view()[1]);
        }
    },
    mounted: function() {
        this.logData();
    }
})

In this article