Detail Rows

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

To define the detail rows, set the detail property of the Grid to a custom class which is inherited from GridDetailRow, and define the expandField property to a field that will correspond to the expanded state of the item.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column, GridDetailRow } from '@progress/kendo-react-grid';

import products from './products.json';

class DetailComponent extends GridDetailRow {
    render() {
        const dataItem = this.props.dataItem;
        return (
            <section>
                <p><strong>In Stock:</strong> {dataItem.UnitsInStock} units</p>
                <p><strong>On Order:</strong> {dataItem.UnitsOnOrder} units</p>
                <p><strong>Reorder Level:</strong> {dataItem.ReorderLevel} units</p>
                <p><strong>Discontinued:</strong> {dataItem.Discontinued}</p>
                <p><strong>Category:</strong> {dataItem.Category.CategoryName} - {dataItem.Category.Description}</p>
            </section>
        );
    }
}

class App extends React.Component {
    state = {
        data: products.slice(0)
    }

    expandChange = (event) => {
        event.dataItem.expanded = !event.dataItem.expanded;
        this.forceUpdate();
    }

    render() {
        return (
            <Grid
                data={this.state.data}
                detail={DetailComponent}
                style={{ height: '400px' }}
                expandField="expanded"
                onExpandChange={this.expandChange}
            >
                <Column field="ProductName" title="Product" width="300px" />
                <Column field="ProductID" title="ID" width="50px" />
                <Column field="UnitPrice" title="Unit Price" width="100px" />
                <Column field="QuantityPerUnit" title="Qty Per Unit" />
            </Grid>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article

 /