New to Kendo UI for jQueryStart a free 30-day trial

Place Icon in DropDownList Placeholder

Environment

ProductProgress® Kendo UI® DropDownList for jQuery
Operating SystemAll
BrowserAll
Browser VersionAll

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