The callback function takes a Row as a parameter and returns an HTML element representing the row details. For example:

// create detail cells for a given row
dp.createDetailCell = (row) => {
    let cell = document.createElement('div');
    new FlexGrid(cell, {
        itemsSource: getProducts(row.dataItem.CategoryID),
        headersVisibility: 'Column'
    });
    return cell;
};

The default value for this property is DetailVisibilityMode.ExpandSingle.

The callback function takes a Row as a parameter and disposes of any resources associated with the detail cell.

This function is optional. Use it in cases where the createDetailCell function allocates resources that are not automatically garbage-collected.

The default value for this property is false.

The default setting for this property is KeyAction.None, which lets the grid handle the key. The other option is KeyAction.ToggleDetail, which handles the Enter key to toggle the display of the row details.

The default value for this property is null, which means there's no upper limit to the detail row height.

The callback function takes a Row as a parameter and returns a boolean value that indicates whether the row has details. For example:

// remove details from items with odd CategoryID
dp.rowHasDetail = (row) => {
    return row.dataItem.CategoryID % 2 == 0;
};

Setting this property to null means all regular data rows (not group rows or new item templates) have details.