Search code examples
jquerykendo-uikendo-dropdown

Kendo UI [kendoDropDownList] - onSelect optionLable, add CSS class

I am using KendoDropDownList for my project and replacing the select box options from script.

I want to add css class placeholder if I select optionLable (-- Please select --)

Online Demo

Please check the below reference image what I am talking about..

enter image description here

HTML

<select id="selectBox" data-bind="value: index, source: newOptions">
  <option>{Label 1}</option>
  <option>{Label 2}</option>
  <option>{Label 3}</option>
</select>

Script

$("#selectBox").kendoDropDownList({
  valuePrimitive: true,
  dataTextField: "text",
  dataValueField: "value",
  optionLabel: "-- Please select --"
});
var icsNew = kendo.observable({
  index: 2,
  newOptions: [
    { value: 1, text: "My option 1" },
    { value: 2, text: "My option 2" },
    { value: 3, text: "My option 3" } ]
});
kendo.bind($("#selectBox"), icsNew);

CSS

.k-dropdown{border:1px solid #ccc;}
.placeholder{color:red;}
Solution

  • You can achieve it with optionLabelTemplate:

    $("#selectBox").kendoDropDownList({
    ...
    optionLabel: "-- Please select --",
    optionLabelTemplate:'<span style="color:red">-- Please select --</span>',
    ...
});