Изменить цвет KendoPanel во время выполнения

Question

Я использую KendoPenel для отображения некоторых данных и хочу развернуть конкретную панель и изменить ее цвет во время выполнения данных, есть некоторые проблемы.

Я могу выбрать панель и развернуть ее, используя следующий код:

 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;
}

Однако, хотя item.addClass('myClass'), кажется, вступает в силу, потому что, когда я наведите курсор на элемент item в отладчике, он имеет класс "MyClass добавлен", но, похоже, он не меняет цвет фона правильно. Нужно ли делать что-то особенное, чтобы изменения вступили в силу?

Answer 1

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

Вам нужно сделать селектор в вашем стиле более конкретным, чтобы он переопределял все остальные правила цвета фона, и этот селектор будет зависеть от содержимого панели.

В моем примере я сделал селектор стиля

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

Если вы только добавляете стиль к элементу li (вашему "элементу"), это не перекрывает фон элементов div, составляющих содержимое. Увеличив специфичность правила стиля, оно переопределит другие стили.