kendoDropDownList optionLabel/placeholder css

[ashutosh]

Hi Team.

 

is there a way i can change the styling of the placeholder(optionLabel) text for kendoDropDownList ?

 

thanks

[Patrick | Technical Support Engineer, Senior]

Hi Ashutosh,

The Kendo UI DropDownList's optionLabel can be custom styled by using the optionLabelTemplate.  With this property, you can add a class, or provide inline style. 

Hope this helps! 

Regards,
Patrick
Progress Telerik

[ashutosh]

thank you Patrick,

 

also, is this available in MVVM rendering? via data-option-label? i did not see that working.

[Patrick | Technical Support Engineer, Senior]

The MVVM implementation will need to utilize an external template for data-option-label-template:

DropDownList

          <input data-role="dropdownlist"
                 data-option-label="-- Please select --"
                 data-option-label-template="myTemplate"
                 style="width: 100%;" />

External Template

    <script type="text/x-kendo-template" id="myTemplate">
        <span style="color:red">-- Please select --</span>
    </script>

Please take a look at the following Progress Kendo UI Dojo which uses the approach above, and let me know if you have any questions.

[ashutosh]

thanks a lot Patrick. that helped.

btw, I was trying to do the same with DropDownTree but it did not work, will you be able to help me with that as well?

[Patrick | Technical Support Engineer, Senior]

I'm glad that helped out!  Typically, since this is an inquiry about another component, I'd suggest creating a forum post.  But as an exception since it's just CSS, please take a look at the following:

The Kendo UI DropDownTree uses the Placeholder property and this can be styled with CSS.

 

    span.k-input.k-readonly{
      color: red;
    }

 

You can see this in action in the following Progress Kendo UI Dojo. For any new questions, please feel free to create a new forum post.