Detail-Row Template

The detail rows of the native Vue Grid by Kendo UI enable you to provide additional details about a particular row of table data through expanding or collapsing its content.

To define the detail rows:

  1. Set the detail property of the Grid to a component, a render function, or a slot.
  2. Define the expandField property to a field that will correspond to the expanded state of the item.
<div id="vueapp" class="vue-app">
    <Grid
    ref="grid"
    :style="{height: '350px'}"
    :data-items="categories"
    :detail="cellTemplate"
    :columns="columns"
    @expandchange="expandChange"
    :expand-field="'expanded'">
</Grid>
</div>
import Vue from 'vue';
import { Grid } from '@progress/kendo-vue-grid';
import { process, filterBy } from '@progress/kendo-data-query';
import { products } from './app/products';

const componentInstance = Vue.component("template-component", {
    props: {
        dataItem: Object
    },
    template: `<section>
                <p><strong>Descriptions:</strong> {{dataItem.Descriptions}}</p>
            </section>`,
    data () {
        return {
            products: products
        }
    },
    computed: {
        getFilteredProducts() {
            const result = filterBy(this.products, {field: 'Category.CategoryID', operator: 'eq', value: this.dataItem.CategoryID});

            return result;
        }
    },
    methods: {

    }
});

Vue.component('Grid', Grid);
new Vue({
    el: '#vueapp',
    data: function () {
        return {
            cellTemplate: componentInstance,
            products: products,
            expandedItems: [],
            columns: [
                { field: 'CategoryID', title: 'ID'},
                { field: 'CategoryName', title: 'Name' }
            ],
            categories: [
                {CategoryID: 1, CategoryName: 'Beverages', Descriptions: 'Soft drinks, coffees, teas, beers, and ales'},
                {CategoryID: 2, CategoryName: 'Condiments', Descriptions: 'Sweet and savory sauces, relishes, spreads, and seasonings'},
                {CategoryID: 3, CategoryName: 'Confections', Descriptions: 'Desserts, candies, and sweet breads'},
                {CategoryID: 4, CategoryName: 'Dairy Products', Descriptions: 'Cheeses'},
                {CategoryID: 5, CategoryName: 'Grains/Cereals', Descriptions: 'Breads, crackers, pasta, and cereal'},
                {CategoryID: 6, CategoryName: 'Meat/Poultry', Descriptions: 'Prepared meats'},
                {CategoryID: 7, CategoryName: 'Produce', Descriptions: 'Dried fruit and bean curd'},
                {CategoryID: 8, CategoryName: 'Seafood', Descriptions: 'Seaweed and fish'}
            ]
        };
    },
    methods: {
        expandChange: function (event) {
            Vue.set(event.dataItem, event.target.$props.expandField, !event.dataItem.expanded);
        },
        getFilteredProducts(catId) {
            const result = filterBy(products, {field: 'Category.CategoryID', operator: 'eq', value: catId});

            return result;
        }
    }
});
const products = [
    {
        "ProductID": 1,
        "ProductName": "Chai",
        "SupplierID": 1,
        "CategoryID": 1,
        "QuantityPerUnit": "10 boxes x 20 bags",
        "UnitPrice": 18.0000,
        "UnitsInStock": 39,
        "UnitsOnOrder": 0,
        "ReorderLevel": 10,
        "Discontinued": false,
        "Category": {
            "CategoryID": 1,
            "CategoryName": "Beverages",
            "Description": "Soft drinks, coffees, teas, beers, and ales"
        }
    },
    {
        "ProductID": 2,
        "ProductName": "Chang",
        "SupplierID": 1,
        "CategoryID": 1,
        "QuantityPerUnit": "24 - 12 oz bottles",
        "UnitPrice": 19.0000,
        "UnitsInStock": 17,
        "UnitsOnOrder": 40,
        "ReorderLevel": 25,
        "Discontinued": false,
        "Category": {
            "CategoryID": 1,
            "CategoryName": "Beverages",
            "Description": "Soft drinks, coffees, teas, beers, and ales"
        }
    },
    {
        "ProductID": 3,
        "ProductName": "Aniseed Syrup",
        "SupplierID": 1,
        "CategoryID": 2,
        "QuantityPerUnit": "12 - 550 ml bottles",
        "UnitPrice": 10.0000,
        "UnitsInStock": 13,
        "UnitsOnOrder": 70,
        "ReorderLevel": 25,
        "Discontinued": false,
        "Category": {
            "CategoryID": 2,
            "CategoryName": "Condiments",
            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
        }
    },
    {
        "ProductID": 4,
        "ProductName": "Chef Anton's Cajun Seasoning",
        "SupplierID": 2,
        "CategoryID": 2,
        "QuantityPerUnit": "48 - 6 oz jars",
        "UnitPrice": 22.0000,
        "UnitsInStock": 53,
        "UnitsOnOrder": 0,
        "ReorderLevel": 0,
        "Discontinued": false,
        "Category": {
            "CategoryID": 2,
            "CategoryName": "Condiments",
            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
        }
    }
];

export { products };

In the above example the row detail template could also be defined as a local component instance in the following way:

const componentInstance = {
    props: {
        dataItem: Object
    },
    template: `<section>
                <p><strong>Descriptions:</strong> {{dataItem.Descriptions}}</p>
            </section>`,
    data () {
        return {
            products: products
        }
    },
    computed: {
        getFilteredProducts() {
            const result = filterBy(this.products, {field: 'Category.CategoryID', operator: 'eq', value: this.dataItem.CategoryID});

            return result;
        }
    },
    methods: {

    }
};

Alternatively, the detail rows could also be defined using the render function, or using named slots.

In this article