Edit this page

Place Icon in DropDownList Placeholder

Environment

Product DropDownList for ProgressĀ® Kendo UIĀ®
Operating System All
Browser All
Browser Version All

Description

How can I show a custom icon in the placeholder of the DropDownList?

Solution

  1. Use the optionLabelTemplate property of the DropDownList.
  2. By using the Kendo UI templates, include an element which displays one of the available Kendo UI web font icons.
<input id="dropdownlist" />

<script>
  $("#dropdownlist").kendoDropDownList({
    dataSource: [{
        productName: "Product 1",
        productId: 1
      },
      {
        productName: "Product 2",
        productId: 2
      }
    ],
    dataTextField: "productName",
    dataValueField: "productId",
    optionLabel: {
      productName: "Select a product...",
      productId: ""
    },
    optionLabelTemplate: "<span class='k-icon k-i-twitter'></span>"
  });
</script>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy