Change Kendo UI style in javascript
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:
- You cannot simply define
background-color
since KendoUI also uses background images and other background attributes, so you need to overwrite all of them. -
!important
is actually important since you want to overwrite posterior definitions forbackground
.
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/
Related videos on Youtube
![Patrice Cote](https://i.stack.imgur.com/N6jlv.jpg?s=256&g=1)
Patrice Cote
Updated on September 16, 2022Comments
-
Patrice Cote almost 2 years
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.
-
Patrice Cote almost 11 yearsI edited my question to explain why I think I can't override the kendo CSS