All Components

Grouping

Grouping allows you to display data items which are categorized by a specific model field.

  • The grouped data is sorted either in ascending or descending order.
  • To group the data in a specific order, use server grouping.

For more information on the grouping functionality of the Data Source, refer to the article on the group configuration.

To configure the rendering of the group titles, use the groupTemplate and fixedGroupedTemplate templates of the component.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource"
                      :type="'odata'"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'"
                      :group-field="'Country'">
    </kendo-datasource>
    <kendo-dropdownlist :data-source-ref="'datasource'"
                        :data-text-field="'ContactName'"
                        :data-value-field="'ContactID'"
                        style="width:300px;">
    </kendo-dropdownlist>
</div>
Vue.use(DropdownsInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp"
})
In this article