Cell Template
The native Vue Grid by Kendo UI enables you to customize the rendering of its cells.
Getting Started
To implement a custom cell:
- Use the
cellRender
prop that will customize all cells. - Set the
cell
option of the column to define a custom cell only for the particular column.
If you use both cellRender
and cell
, the Grid will render the specified custom column cell. To render the desired cell, you can assign a Vue component, a render
function, or a named slot to both properties.
Customization Approaches
To customize the cells in the Grid, apply any of the following approaches:
Using Named Slots
Using the render Function
The following example demonstrates how to customize the Grid cells by using a render
function. More details about the render function, you can find in this Vue documentation article.
Using Vue Components
The native Vue Grid allows you to use both global and local component instance for the Grid cells. The following example demonstrates how to customize the Grid cells by using a global Vue component instance.
The same could also be achieved using the following local component instance:
const componentInstance = {
props: {
field: String,
dataItem: Object,
format: String,
className: String,
columnIndex: Number,
columnsCount: Number,
rowType: String,
level: Number,
expanded: Boolean,
editor: String,
},
template: ` <td :class="className" @click="clickHandler"><b>{{ getNestedValue(field, dataItem)}}</b></td>`,
methods: {
clickHandler: function(e){
this.$emit('custom', e);
},
getNestedValue: getNestedValue
}
};