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