Change Kendo UI style in javascript

Question

I have to change the background color of some controls in javascript. I found the way for DropDownList and ComboBox but I can't find anything about DatePicker ? What is bizarre is that there is no standard way to do it as no control seems to give you access to the same element. For exemple, to do what I want in a dropdownlist, I access the "span" :

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

While with a combobox, you have access to the "input" element :

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

Yet, none of these works with the kendoDatePicker. Anyone knows the way ? I tried accessing css directly (like in JQuery) but had no luck.

EDIT : I need to change only a few controls in my forms, not all of them. That's why I can't override kendo CSS. I also need to apply this background only when my view model is on edit mode. Therefore, I need to be able to toggle class, that's why I'm thinking JavaScript.

Answer 1

The easies way is defining your own CSS for applying the color. You can do it in a single command as:

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

Then for using it you don't need to do anything special, just:

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

It is important to note a couple of questions:

1. You cannot simply define background-color since KendoUI also uses background images and other background attributes, so you need to overwrite all of them.
2. !important is actually important since you want to overwrite posterior definitions for background.

Example here: http://jsfiddle.net/OnaBai/Nxv3B/

EDIT: If you want to do it programmatically so you can control which elements, then you should do.

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

For creating the widget and then for applying the styling:

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

See the fiddle modifier in here: http://jsfiddle.net/OnaBai/Nxv3B/5/