New to Kendo UI for jQuery? Download free 30-day trial

Add an icon in the DropDownList placeholder

Environment

Product Progress® Kendo UI® DropDownList for jQuery

Description

How can I add an icon in the DropDownList placeholder?

Solution

    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <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