Selection in Angular Grid component

3 Sep 20251 minute to read

You can customize the selection appearance in the Syncfusion Angular Grid component with CSS. The following examples show how to style the row, cell, and column selection backgrounds.

Customizing the row selection background

To change the background color of selected rows, use the following CSS:

.e-grid td.e-selectionbackground {
    background-color: #00b7ea;
}

The .e-selectionbackground class targets the selection background in rows. Adjust the background-color property as desired.

Row selection

Customizing the cell selection background

To style the background of selected cells, use this CSS:

.e-grid td.e-cellselectionbackground {
    background-color: #00b7ea;
}

The .e-cellselectionbackground class controls the background color for selected cells. Update the background-color property to customize the cell selection.

Cell selection

Customizing the column selection background

To modify the column selection’s background color, apply the following CSS:

.e-grid .e-columnselection {
    background-color: #aec2ec;
}

The .e-columnselection class targets the background for selected columns. Change the background-color as needed for your column selection styling.

Cell selection