Column Menu

You can trigger implement the triggering of column operations by rendering a column menu.

To enable the built-in column menu of the Kendo UI Grid wrapper for Vue, use the :columnMenu="true" configuration. As a result, an option to display a column menu will be rendered in the column headers and when activated, the column menu allows you to sort, filter, or change the visibility of the column. The column menu also detects whether a column operation is disabled through the column definition and excludes the corresponding UI from its rendering as demonstrated in the following example for the Category column for which filtering is disabled.

<div id="vueapp" class="vue-app">
    <kendo-grid :data-source="localDataSource"
                :sortable="true"
                :filterable="true"
                :column-menu="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"
                           :filterable="false"></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: {
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            ProductID: { editable: false, nullable: true },
                            ProductName: { type: "string" },
                            UnitPrice: { type: "number" },
                            Category: { field: "Category" },
                            Discontinued: { type: "boolean" }
                        }
                    }
                },
                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