jqueryhtmlcsskendo-uikendo-panelbar

Change Color of KendoPanel at runtime


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?


Solution

  • 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.