Grouping Basics

By default, grouping in the Kendo UI Grid wrapper for Vue is disabled and the :groupable option is set to false.

To configure the grouping functionality in the native Vue Grid by Kendo UI, refer to the native Vue Grid by Kendo UI documentation.

To enable grouping, set :groupable to true. As a result, the header renders a new area which allows the user to drop a column on it and group the data by that column. You can also group the data by multiple columns through dragging a second column onto the grouping header. For more information on grouping, refer to the documentation of the Kendo UI Grid for jQuery.

<div id="vueapp" class="vue-app">
    <kendo-grid :data-source="localDataSource"
                :groupable="true">
        <kendo-grid-column :field="'ProductName'" :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'UnitPrice'"
                           :title="'Unit Price'"
                           :width="120"
                           :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column :field="'Category'"
                           :title="'Category'"
                           :width="180" ></kendo-grid-column>
        <kendo-grid-column :field="'Discontinued'" :width="120"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            localDataSource: {
                data: [{
                    "ProductID": 1,
                    "ProductName": "Chai",
                    "UnitPrice": 18,
                    "UnitsInStock": 39,
                    "Discontinued": false,
                    "Category": "Beverages"
                },
                {
                    "ProductID": 4,
                    "ProductName": "Chef Anton",
                    "UnitPrice": 22,
                    "UnitsInStock": 53,
                    "Discontinued": false,
                    "Category": "Beverages"
                },
                {
                    "ProductID": 5,
                    "ProductName": "Chef Gumbo Mix",
                    "UnitPrice": 21.35,
                    "UnitsInStock": 0,
                    "Discontinued": true,
                    "Category": "Dairy Products"
                },
                {
                    "ProductID": 6,
                    "ProductName": "Boysenberry Spread",
                    "UnitPrice": 25,
                    "UnitsInStock": 120,
                    "Discontinued": false,
                    "Category": "Condiments"
                }]
            }
        }
    }
})

In this article