Components / Data Grid / API / GridDetailRow / 

GridDetailRow

A subclass of React.Component.

Represents the detail row class of the KendoReact Grid. Used to define custom details for each row. Can be applied for building the hierarchy. If expandField is set, the details for each row will be visible or hidden depending on the current data item and its expandField value.

class CustomGridDetailRow extends GridDetailRow {
    render() {
        const detailData = this.props.dataItem.MasterField2;
        return (
            <div>
              This is detail template with another grid inside it
              <Grid scrollable="none" data={detailData} />
            </div>
        );
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [{MasterField1:'A1', MasterField2: [{DetailField1: 1, DetailField2: 2}]},
                  {MasterField1:'B1', MasterField2: [{DetailField1: 3, DetailField2: 4}]},
                  {MasterField1:'C1', MasterField2: [{DetailField1: 5, DetailField2: 6}]}]
        };
    }
    render() {
        return (
            <Grid
                 data={this.state.data}
                 detail={CustomGridDetailRow}
             >
             <GridColumn field="MasterField1" />
            </Grid>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
NameTypeDefaultDescription

props

Readonly<GridDetailRowProps>

The props of the GridDetailRow component.

In this article

Not finding the help you need?

Contact Support