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.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
                      :type="'odata'"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'">
    </kendo-datasource>

    <kendo-grid ref="grid"
                :height="550"
                :data-source-ref="'datasource1'"
                :sortable="true"
                :toolbar="toolbarTemplate">
        <kendo-grid-column :field="'ProductID'"
                           :title="'Product ID'"></kendo-grid-column>
        <kendo-grid-column :field="'ProductName'"
                           :title="'Product Name'"></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);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
        }
    },
    methods: {
        toolbarTemplate: function() {
            var templateHtml =
                '<span>' +
                    '<a class="k-pager-refresh k-link k-button" title="Refresh"><span class="k-icon k-i-reload"></span></a>' +
                '</span>' +
                '<span style="position:absolute; right:5px">' +
                    `<label class="category-label" for="category">Show products by category:</label>` +
                    '<input type="search" id="category" style="width: 150px"/>' +
                '</span>';

            return kendo.template(templateHtml);
        }
    },
    mounted: function() {
        var grid = this.$refs.grid.kendoWidget();
        var gridElement = grid.element;
        var dropDownElement = gridElement.find('#category');
        var toolbarElement = gridElement.find('.k-grid-toolbar');

        dropDownElement.kendoDropDownList({
            dataTextField: "CategoryName",
            dataValueField: "CategoryID",
            autoBind: false,
            optionLabel: "All",
            dataSource: {
                type: "odata",
                severFiltering: true,
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                }
            },
            change: function(e) {
                var value = e.sender.value();
                if (value) {
                    grid.dataSource.filter({ field: "CategoryID", operator: "eq", value: parseInt(value) });
                } else {
                    grid.dataSource.filter({});
                }
            }
        });

        toolbarElement.on("click", ".k-pager-refresh", function (e) {
            e.preventDefault();
            grid.dataSource.read();
        });
    }
})

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.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
                      :type="'odata'"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees'">
    </kendo-datasource>

    <kendo-grid ref="grid"
                :height="550"
                :data-source-ref="'datasource1'"
                :row-template="rowTemplate"
                :alt-row-template="altRowTemplate">
        <kendo-grid-column title="Details" :width="110"></kendo-grid-column>
        <kendo-grid-column title="Country" :width="110"></kendo-grid-column>
        <kendo-grid-column title="ID" :width="110"></kendo-grid-column>
    </kendo-grid>
</div>
<style>
    .details {
        width: 400px;
    }
    .name {
        display: block;
        font-size: 1.6em;
    }
    .title {
        display: block;
        padding-top: 1.6em;
    }
    .employeeID,
    .country {
        font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
        font-size: 50px;
        font-weight: bold;
        color: #898989;
    }
    td.photo, .employeeID {
        text-align: center;
    }
    .k-grid-header .k-header {
        padding: 10px 20px;
    }
    .k-grid td {
        background: -moz-linear-gradient(top,  rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.15)));
        background: -webkit-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
        background: -o-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
        background: -ms-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
        background: linear-gradient(to bottom,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
        padding: 20px;
    }
    .k-grid .k-alt td {
        background: -moz-linear-gradient(top,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.1)));
        background: -webkit-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
        background: -o-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
        background: -ms-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
        background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
    }
</style>
Vue.use(GridInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            rowTemplate: this.generateRowTemplate(),
            altRowTemplate: this.generateAltRowTemplate()
        }
    },
    methods: {
        generateRowTemplate: function() {
            var template =
                '<tr data-uid="#: uid #">' +
                    '<td class="details">' +
                        '<span class="name">#: FirstName# #: LastName# </span>' +
                        '<span class="title">Title: #: Title #</span>' +
                    '</td>' +
                    '<td class="country">' +
                        '#: Country #' +
                    '</td>' +
                    '<td class="employeeID">' +
                        '#: EmployeeID #' +
                    '</td>' +
                '</tr>'

            return kendo.template(template);
        },
        generateAltRowTemplate: function() {
            var template =
                '<tr class="k-alt" data-uid="#: uid #">' +
                    '<td class="details">' +
                        '<span class="name">#: FirstName# #: LastName# </span>' +
                        '<span class="title">Title: #: Title #</span>' +
                    '</td>' +
                    '<td class="country">' +
                        '#: Country #' +
                    '</td>' +
                    '<td class="employeeID">' +
                        '#: EmployeeID #' +
                    '</td>' +
                '</tr>'

            return kendo.template(template);
        }
    },
})

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.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource"
                        :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees'"
                        :type="'odata'"
                        :batch='true'
                        :page-size='20'>
    </kendo-datasource>

    <kendo-grid :height="600"
                :data-source-ref="'datasource'"
                :pageable='true'
                :editable="'inline'"
                v-on:detailinit="detailInit"
                v-on:databound="dataBound">
          <kendo-grid-column field="FirstName" title="First Name" :width="110"></kendo-grid-column>
          <kendo-grid-column field="LastName" title="Last Name" :width="110"></kendo-grid-column>
          <kendo-grid-column field="Country" :width="110"></kendo-grid-column>
          <kendo-grid-column field="City" :width="300"></kendo-grid-column>
          <kendo-grid-column field="Title"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    methods: {
        detailInit: function (e) {
            $('<div />').appendTo(e.detailCell).kendoGrid({
                dataSource: {
                    type: 'odata',
                    transport: {
                        read: 'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders'
                    },
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    pageSize: 10,
                    filter: {
                        field: 'EmployeeID',
                        operator: 'eq',
                        value: e.data.EmployeeID
                    }
                },
                scrollable: false,
                sortable: true,
                pageable: true,
                columns: [{
                    field: 'OrderID',
                    width: '110px'
                    },
                    {
                    field: 'ShipCountry',
                    title: 'Ship Country',
                    width: '110px'
                    },
                    {
                    field: 'ShipAddress',
                    title: 'Ship Address'
                    },
                    {
                    field: 'ShipName',
                    title: 'Ship Name',
                    width: '300px'
                }]
            })
        },
        dataBound: function (ev) {
          ev.sender.expandRow(ev.sender.tbody.find('tr.k-master-row').first())
        }
    }
})

In this article