DataGrid - Using dataRowTemplate for just one row

Hello Adam,

Thank you for the ticket link.

The dxDataGrid does not allow you to apply dataRowTemplate to a single row. Technically, you can modify the required row through DOM manipulation in the dxDataGrid.onRowPrepared function, but I wouldn't recommend this approach in React. Consider manually rendering the fake row as custom markup outside the grid instead.

If the fake row should be a part of the grid, you can use a custom template for this row as follows:

• Define the first column's cellRender property. You need to recreate the default cell content in this case. For example:

Code
// <Column dataField="myFirstColumn" cellRender={renderFirstColumn} ...

const renderFirstColumn = (cellInfo) => {
    if (isFakeRow) { // your condition to identify the fake row
        return (<div>your custom content goes here</div>)
    } else {
        return (<div>{cellInfo.text}</div>); // default
    }
}

• Specify the colspan attribute for the row's first cell and hide other cells in the onRowPrepared function. For example:

Code
const onRowPrepared = (e) => {
    if (isFakeRow) { // your condition to identify the fake row
        [e.rowElement.children].forEach((cell, index) => {
            if (index === 0) {
                cell.setAttribute('colspan', myColumnCount);
            } else {
                cell.style.display = 'none';
            }
        });
    }
}

You can use this sample as a starting point.

Please let me know if you need further assistance.