Need guidance on CSS with selectable colors for grids.

[George]

Hi,

Currently I am maintaining a couple of different versions of a project. The selectable option is working but the colors when a row is selected are off a bit:

Here is the older version of Kendo UI for jQuery (2020.3 SP1):

 

The newer version of Kendo (2023.3 SP1) changed the color, and it works nicely with my child grids:

How can I change the older Kendo UI so it looks more like the newer version? So when selected the background color changes  enough that the letters are visible in front of the background color? I am guessing there is a way to do this via  a cascading style sheet?

P.S. Here is a DOJO with my code:

https://dojo.telerik.com/@[e-mail]/aZAwIRaX

 

Regards,

George

[Peter Milchev]

Hello George,

You can change the styles for the rows using the additional .k-state-selected class: 

    <style>
        .child-table-details {
            background-color: #ffffcc;
        }
        .k-state-selected > .child-table-details {
          color: #e2e2e2; 
          background-color: green
        }
    </style>

For further customization, you can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

• Inspect the Generated HTML of a Control;
• See the Applied Styles;

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

Regards,
Peter Milchev
Progress Telerik

[George]

Peter,

Ok, great. I guess I would have to attach this to the style attribute of the template option for the column?

George

[Peter Milchev]

There is no need to add anything more to the columns. The k-state-selected class is applied to the row automatically when a row is selected. 

Just defining the CSS style on the page should be sufficient to change the appearance of the selected row's font and background colors.

[George]

Ok yes understood. Thanks George

[George]

Here is what I did to solve this problem, thanks to Peter. In my associated .css file I was able to plop this in:

#idOfGrid .child-table-details {
    background-color: #ffffcc;
}

#idOfGrid .k-state-selected > .child-table-details {
    color: #e2e2e2;
    background-color: #1e98d7;
}

I reference this on my html page. Now I have a couple of grids on my view/screen/ html page... whatever you like calling it. Seems to work just fine. Thanks again to Peter for this solution. I really need to be more aware of my Kendo class types...so I am going back and reading the documentation for this, so I don't have to bug anyone about this. :)

George