All Components

Columns

The Grid supports options for configuring the behavior of its columns.

To manage the columns of the Grid, either:

For more information on the available props, refer to the grid.columns configuration.

Using the data Vue Object

The following example demonstrates how to use the data object to specify the columns of the Grid.

<div id="vueapp" class="vue-app">
    <kendo-grid :data-source="localDataSource" :columns="columns">
    </kendo-grid>
</div>
Vue.use(GridInstaller);
new Vue({
    el: '#vueapp',
   data () {
        return {
        columns: [
            "ProductName",
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
            { field: "Discontinued", width: "120px" },
        ],
        localDataSource: [{
                'ProductID':1,
                'ProductName':'Chai',
                'UnitPrice':18,
                'UnitsInStock':39,
                'Discontinued':false
            },
            {
                'ProductID':2,
                'ProductName':'Chang',
                'UnitPrice':19,
                'UnitsInStock':17,
                'Discontinued':false
            }]
        }
    }
})

Using the kendo-grid-columns Component

The following example demonstrates how to set the inline initialization of the kendo-grid-columns component.

<div id="vueapp" class="vue-app">
     <kendo-grid :data-source="localDataSource">
        <kendo-grid-column field="ProductName"></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