ColumnMenuSort

Copy Code<div id="vueapp">
   <Grid :style="{height: '280px'}"
        :data-items="gridData"
        :sortable="true"
        :sort= "sort"
        :filter="filter"
        :expand-field="'Discontinued'"
        @datastatechange="dataStateChange"
        @expandchange="expandChange"
        :columns="columns">
     </Grid>
</div>

Copy Codeimport { , ColumnMenuSort } from '@progress/kendo-vue-grid';
import { process } from '@progress/kendo-data-query';
     const ColumnMenu = {
       props: {
           column: Object,
           sortable: [Boolean, Object],
           sort: {
               type: Array
           },
           filter: Object,
           filterable: Boolean
       },
       components: {
           ColumnMenuSort
       },
       template: `<div>
           <ColumnMenuSort
               :column="column"
               :filterable="filterable"
               :filter="filter"
               @closemenu ="closeMenu"
               @sortchange = "sortChange"
           />
       </div>`,
       methods: {
           closeMenu () {
               this.$emit('closemenu');
           },
           sortChange (newDescriptor, e) {
               this.$emit('filterchange', newDescriptor, e);
           }
       }
     };

     Vue.component('Grid', );
     new Vue({
         el: '#vueapp',
         components: {
           
         },
         created: function() {
            this.getData();
         },
         methods: {
           getData: function () {
               let dataState = {
                   filter: this.filter,
                   sort: this.sort
               };
               this.gridData = process([{
                   "ProductID": 1,
                   "ProductName": "Chai",
                   "UnitsInStock": 39,
                   "Discontinued": false,
                   "FirstOrderedOn": new Date(1996, 8, 20)
               },{
                   "ProductID": 2,
                   "ProductName": "Chang",
                   "UnitsInStock": 17,
                   "Discontinued": false,
                   "FirstOrderedOn": new Date(1996, 7, 12)
               },{
                   "ProductID": 3,
                   "ProductName": "Aniseed Syrup",
                   "UnitsInStock": 13,
                   "Discontinued": false,
                   "FirstOrderedOn": new Date(1996, 8, 26)
               },{
                   "ProductID": 4,
                   "ProductName": "Chef Anton's Cajun Seasoning",
                   "UnitsInStock": 53,
                   "Discontinued": false,
                   "FirstOrderedOn": new Date(1996, 9, 19)
               }], dataState);
           },
           createAppState: function(dataState) {
               this.sort = dataState.sort;
               this.filter = dataState.filter;
               this.getData();
           },
           dataStateChange: function (event) {
               this.createAppState(event.data);
           },
           expandChange: function (event) {
                event.dataItem[event.target.$props.expandField] = event.value;
                //
                // In Vue 2 context, instead of the above line, inside the expandChange method we should have the following:
                //
                //   Vue.set(
                //     event.dataItem,
                //     event.target.$props.expandField,
                //     event.dataItem.expanded === undefined ? false : !event.dataItem.expanded
                //   );
                //
           }
         },
         data: function () {
             return {
                filter: null,
                sort: [],
                 gridData: [],
                 columns: [
                     { field: 'ProductID'},
                     { field: 'ProductName', title: 'Product Name' },
                     { field: 'UnitsInStock', title: 'Units In Stock', columnMenu: ColumnMenu }
                 ]
             };
         }
      } );