New to Kendo UI for Vue? Start a free 30-day trial

Templates

The Kendo UI Grid wrapper for Vue enables you to use templates for flexible row and toolbar customization in terms of layout and appearance.

To use the custom templates which the native Vue Grid by Kendo UI supports, refer to the native Vue Grid by Kendo UI documentation.

Toolbar Template

You can define a template for the content of the toolbar of the Grid which can vary based on specific requirements.

The following example demonstrates how to implement a toolbar template which incorporates a DropDownList for the records that are sorted by category. The drop-down list is populated with the list of categories and the filter is applied on its change event by invoking the grid.dataSource.filter(params) method from the API.

Example
View Source
Edit In Stackblitz  
Change Theme:

Row Template

The following example demonstrates how to specify custom layout for the rows of the Kendo UI Data Grid wrapper for Vue by using property bindings from its underlying data source. The row templates are defined through script tags with ids which are associated with the rendered table HTML row elements. The example instantiates the row and altrow templates by calling the kendo.template method and assigning the returned value to the rowTemplate and altRowTemplate properties of the Grid instance.

Example
View Source
Edit In Stackblitz  
Change Theme:

Master-Detail Template

The Kendo UI Grid wrapper for Vue provides options for visualizing the relations between its parent and child records by displaying the table data in a hierarchical order.

Example
View Source
Edit In Stackblitz  
Change Theme: