Change Color of KendoPanel at runtime

Question

I Am using KendoPenel to display some data and want to expand a particular panel and change its color at runtime of the data has some issues.

I am able to select the panel and expand it using following code:

 function ExpandItemInPanelBar() {
        var panelBar = $("#KendoPanel3").data("kendoPanelBar");
        // I have set 0 in 'eq(0)' so it will expand first item you can change it as per your code
        panelBar.select(panelBar.element.children("li").eq(2));

        var item = panelBar.select();          
        panelBar.expand(item);
        item.addClass('myClass')   

    }

   .myClass
{
    background-color: red;
}

However though item.addClass('myClass') seems to take effect because when I hover on the item element in debugger, it has the class "MyClass added" but it sounds like it does not change the background color correctly. Do I need to do anything special for that particular change to take effect?

Try adding it to the respective li using item.find("li").addClass('myClass') — Vijai
If you want to change the color of the expanded panel you need to add that class to the span inside li because that is the front element. — calinaadi

The Dread Pirate Stephen The Dread Pirate Stephen · Accepted Answer · 2016-09-27T13:07:40

http://dojo.telerik.com/@Stephen/IXEfe

You need to make the selector on your style more specific so it overrides all the other background-color rules, and this selector will depend on the content of the pane.

In my example, I made the style selector

ul.k-panelbar > li.myClass > div
{
  background-color: red; 
}

If you only add the style to the li element(your "item"), that does not override the background of the divs making up the content. By increasing the specificity of the style rule, it will override the other styling.

Change Color of KendoPanel at runtime

1 Answers