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.
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.
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
altrow templates by calling the
kendo.template method and assigning the returned value to the
altRowTemplate properties of the Grid instance.
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.