Изменение стиля пользовательского интерфейса Kendo в javascript

Question

Мне нужно изменить цвет фона некоторых элементов управления в javascript. Я нашел путь для DropDownList и ComboBox, но я ничего не могу найти о DatePicker? Что странно, так это то, что нет стандартного способа сделать это, поскольку никакой контроль не дает вам доступа к одному и тому же элементу. Для Exemple, чтобы делать то, что я хочу в DropDownList, я достигаю «пролет»:

$("#myDropDown").data("kendoDropDownList").span.css("background-color", "#BDD1FF"); 

Хотя с выпадающий список, у вас есть доступ к элементу «ввода»:

$("#myComboBox").data("kendoComboBox").input.css("background-color", "#BDD1FF"); 

Тем не менее, ни одна из них не работает с kendoDatePicker. Кто-нибудь знает дорогу? Я попытался получить доступ непосредственно к css (как в JQuery), но не повезло.

EDIT: Мне нужно изменить только несколько элементов управления в моих формах, а не все из них. Вот почему я не могу переопределить CSS кендо. Мне также нужно применить этот фон только тогда, когда моя модель просмотра находится в режиме редактирования. Поэтому мне нужно иметь возможность переключать класс, поэтому я думаю о JavaScript.

Answer 1

Пути easies определяют ваш собственный CSS для применения цвета. Вы можете сделать это в одной команде, как:

.k-input { 
    background: #BDD1FF !important; 
} 

Тогда для его использования не нужно делать ничего особенного, просто:

$("#myKendoDropDown").kendoDropDownList().data("kendoDropDownList"); 
$("#myComboBox").kendoComboBox({}).data("kendoComboBox"); 
$("#myDate").kendoDatePicker({}); 

Важно отметить несколько вопросов:

1. вы не можете просто определить background-color поскольку KendoUI также использует фоновые изображения и другие атрибуты фона, так что вам нужно переписать все из них.
2. !important действительно важно, так как вы хотите переписать задние определения для background.

Пример здесь: http://jsfiddle.net/OnaBai/Nxv3B/

EDIT: Если вы хотите сделать это программно, так что вы можете контролировать, какие элементы, то вы должны сделать.

var dd1 = $("#myKendoDropDown1").kendoDropDownList().data("kendoDropDownList"); 

Для создания виджета, а затем для применения укладки:

dd1.wrapper.find(".k-input").css("background", "#BDD1FF"); 

Посмотреть скрипку модификатор здесь: http://jsfiddle.net/OnaBai/Nxv3B/5/

Answer 2

Вместо того, чтобы пытаться сделать это так, как выше, не беспокоиться о том, что это Kendo DropDownList. Проблема в том, что большую часть времени в Document.Ready виджет еще не готов. Поэтому просто относитесь к нему так, как будто это обычный элемент на странице, пока он не загрузится. Это избавит вас от LOADS времени.

$("#myKendoDropDown1").css("width", 220); 

Это не правильный ответ на этот пост, потому что это решение не будет работать с цветом фона, но он работает с другими CSS.