Handled row selection of custom column template

[Sebastian Göhring]

Requirement: In my application I want to be able to style a column template depending on wheter the row related to it has been selected or not. Since the column has per default a different background color I need to treat this separatly.

The column in question is the one on the left in white. Id like to highlight it in a different color then the default selection color.

[Rajapandiyan Settu]

Hi Sebastian, 

Thanks for contacting Syncfusion support.

By using following CSS, you can customize the template cell on hovering and selection of the row.

 

[index.js]

 

    {

      headerText: 'Serial No',

      template: '#template',

      customAttributes: { class: 'customcell' }, // add custom class to the template cell

      width: 120,

    },

 

[index.html]

 

    <style>

      .e-grid td.e-rowcell.e-templatecell.customcell, // Class used for normal mode

      .e-grid td.e-rowcell.e-templatecell.customcell.e-active { // used for selection

        background: yellow;

      }

      .e-grid.e-gridhover

        tr[role='row']:not(.e-editedrow):hover

        .e-rowcell.customcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {  // used for hovering

        background-color: yellow;

      }

    </style>

 

Sample: https://stackblitz.com/edit/rj7w2h?file=index.js

Please get back to us if you need further assistance with this.

Regards, 

Rajapandiyan S