DataGrid/TreeList - The markup of an editable cell has changed

What Changed

In v20.2 and newer, DataGrid/TreeList does not render a DIV element with the dx-highlight-outline CSS rule in an editable data cell, and data cell content is placed directly in the TD element.

Reasons for Change

Prior to v20.2, DataGrid/TreeList rendered a DIV element with the dx-highlight-outline CSS rule in an editable cell. This DIV was used for highlighting a modified or invalid cell (a green or red border was shown). However, rendering this element caused the following issue: DataGrid - The "Failed to execute 'removeChild' on 'Node'" error appears when modifying a component's state in a cell template.

Currently, CSS allows highlighting table cells without using this redundant element. That is why, we decided to remove it to fix the issue.

Impact on Existing Apps

Though this change simplifies the markup of a data cell and the CSS class is not documented, it may affect your project if you overrode DevExtreme CSS rules that contained the dx-highlight-outline class.

The following code snippet shows how to change the border of a modified or invalid cell in versions prior to v20.2:

CSS
.dx-datagrid-rowsview .dx-data-row .dx-cell-modified .dx-highlight-outline::after, 
.dx-treelist-rowsview .dx-data-row .dx-cell-modified .dx-highlight-outline::after {
    border-color: yellow!important;
}

.dx-datagrid-rowsview .dx-data-row .dx-datagrid-invalid .dx-highlight-outline::after
.dx-treelist-rowsview .dx-data-row .dx-treelist-invalid .dx-highlight-outline::after {
    border-color: blue!important;
}

The code below shows how you can do this in v20.2:

CSS
.dx-datagrid-rowsview .dx-data-row td.dx-cell-modified:not(.dx-datagrid-invalid)::after
.dx-treelist-rowsview .dx-data-row td.dx-cell-modified:not(.dx-treelist-invalid)::after {
    border-color: yellow!important;
}

.dx-datagrid-rowsview .dx-data-row td.dx-datagrid-invalid::after
.dx-treelist-rowsview .dx-data-row td.dx-treelist-invalid::after {
    border-color: blue!important;
}