Resizing

You can enable the resizing feature of the Kendo UI Grid wrapper for Vue columns by using its resizable property.

To enable the column resizing functionality in the native Vue Grid by Kendo UI, refer to the native Vue Grid by Kendo UI documentation.

To display drag handles on hovering over the columns and enable resizing, set resizable to true.

<div id="vueapp" class="vue-app">
     <kendo-grid :data-source="localDataSource" :resizable="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="'UnitsInStock'"
                           :title="'Units In Stock'"
                           :width="120"></kendo-grid-column>
        <kendo-grid-column :field="'Discontinued'" :width="120"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);
new Vue({
    el: '#vueapp',
    data: {
        localDataSource: [{
                'ProductID':1,
                'ProductName':'Chai',
                'UnitPrice':18,
                'UnitsInStock':39,
                'Discontinued':false
            },
            {
                'ProductID':2,
                'ProductName':'Chang',
                'UnitPrice':19,
                'UnitsInStock':17,
                'Discontinued':false
            }
        ]
    }
})

In this article