How to change the GridCell style at runtime?

In the SfDataGrid, it is possible to change the GridCell style at run time. You can refer here to know more about the GridCell style customization in the SfDataGrid. Normally, the GridCell can be customized based on the data present in the GridCell by using the CellStyleSelector. You can refer here to know about the StyleSelectors in the SfDataGrid and refer here to customize the GridCell based on the GridCell value.

To change the GridCell style on clicking a cell and also maintain that cell style when you click other cells, use the CurrentCellActivatedEvent along with the CellStyleSelector. In the following code example, on clicking the cell the foreground is changed by using the CellStyleSelector.

As mentioned earlier, the GridCell is customized based on the data. To change the style at runtime, you need two properties, the DataIndex and ColoredRows that are maintained in the model class, DataContext of the GridCell, here OrderInfo.

• DataIndex - Denotes the column index of the clicked GridCell.
• ColoredRows - Collection of DataIndex that is used to retain the GridCell style.

The CurrentCellActivated event is fired when you click the cell. By using this event, you can change the style of the GridCell that is clicked. Refer to the following code example.

C#

In the CurrentCellActivated event, the GridCell is accessed with the help of the CurrentCellElement. From that cell, you can get the datacontext. Here, the datacontext is the underlying Business Object. Then column index of the clicked cell is assigned to the DataIndex. By default, DataIndex is considered as -1 for all the records.

Finally, you need to call the UpdateDataRow method to refresh the specified row and update the style. Refer to the following code example to define the style for the GridCell.

XAML

Refer to the following code example to change the GridCell style by using the CellStyleSelector class.

C#

Here, the CellStyleSelector class is derived from the StyleSelector and overrides the SelectStyleCore method. In the SelectStyleCore method, record is accessed from the argument item and the columnindex of a GridCell is accessed from the argument container. The style returns based on the given conditions. As mentioned above, the DataIndex of the GridCell is changed based on its column index when the cell is clicked. Here, when the columnindex of a GridCell and the DataIndex are the same, then the DataIndex is added to the ColoredRows collection and the customized style is returned to change the foreground of the GridCell. When the columnindex is already present in the ColoredRows collection, then the customized style is returned to retain the foreground of the GridCell. Refer to the following code example to apply the customized style to the GridCell by using the CellStyleSelector.

XAML

The GridCell foreground has been changed on clicking the GridCell as displayed in the following screenshot.

Figure 1: GridCell Foreground changed to Red on clicking the cell

Sample Link:

WRT

WPF

UWP