This is a migrated thread and some comments may be shown as answers.

Prevent Selected Row Highlight

3 Answers 1363 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Scott Michetti
Top achievements
Rank 1
Scott Michetti asked on 27 Sep 2019, 03:56 PM

Hello,

I have a checkbox column. If I check the box, the row becomes highlighted. I would like the row to not be highlighted when the the checkbox is checked. I tried overriding a style and it worked, but it also prevents the highlight when mousing over the row. I would like the row to highlight on mouse over, but not to stay highlighted when the checkbox column is checked. How would I achieve this?

.k-grid tr.k-state-selected > td {
  background-color: #fafafa;
}

 

Thanks,

Scott

3 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 30 Sep 2019, 12:50 PM

Hello Scott,

In general, the CSS code that you have tried is valid. However, we have to set the background-color CSS property to inherit in order to save the initial background color of the grid rows:

 .k-grid tr.k-state-selected td {
        background-color: inherit;
}

Here is an example:

https://stackblitz.com/edit/angular-qkytsu?file=app/app.component.ts

I hope this helps.

Regards,
Martin
Progress Telerik

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Scott Michetti
Top achievements
Rank 1
answered on 02 Oct 2019, 04:59 PM

Thank you Martin. This is still highlighting the row when a checkbox is checked. If you look at the second row in your demo, you will see that the row highlights when the checkbox is checked. This is what I am trying to avoid if possible.

 

Thanks,

Scott

0
Accepted
Martin
Telerik team
answered on 03 Oct 2019, 01:31 PM

Hello Scott,

Yes, you are right. In fact, the .k-alt row (the darker one) still highlighted after selection. I am sorry for the misunderstanding.

Use the following CSS code to save the default background-color of a .k-alt row:

 .k-grid tr.k-alt.k-state-selected td {
        background-color: unset;
      }

Here is an updated example:

https://stackblitz.com/edit/angular-qkytsu-krytqp?file=app/app.component.ts

Let me know if I can provide further help.

Regards,
Martin
Progress Telerik

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Scott Michetti
Top achievements
Rank 1
Answers by
Martin
Telerik team
Scott Michetti
Top achievements
Rank 1
Share this question
or