New to KendoReact? Start a free 30-day trial

GridDetailRow

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. The details for each row will be visible or hidden depending on the current detailExpand prop.

A Functional Component.

Definition

Package:@progress/kendo-react-grid

Syntax:

jsx

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

const App = () => {
    const [data, setData] = useState([
        { MasterField1: 'A1', MasterField2: [{ DetailField1: 1, DetailField2: 2 }] },
        { MasterField1: 'B1', MasterField2: [{ DetailField1: 3, DetailField2: 4 }] },
        { MasterField1: 'C1', MasterField2: [{ DetailField1: 5, DetailField2: 6 }] }
    ]);

    return (
        <Grid data={data} detail={CustomGridDetailRow}>
            <GridColumn field="MasterField1" />
        </Grid>
    );
};

export default App;

Properties

props

GridDetailRowProps

The props of the GridDetailRow component.