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

In this article
Not finding the help you need? Improve this article