Edit this page

valueTemplate String |Function

The valueTemplate used to render the selected value. By default the widget displays only the text of the data item (configured via dataTextField).

Example - specify valueTemplate as a function

<input id="dropdownlist" />
<script id="valueTemplate" type="text/x-kendo-template">
    <img src="/img/#: id #.png" alt="#: name #" />
    #: name #
</script>
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  dataValueField: "id",
  valueTemplate: kendo.template($("#valueTemplate").html())
});
</script>

Example - specify template as a string

<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  dataValueField: "id",
  valueTemplate: '<img src="/img/#: id #.png" alt="#: name #" />#: name #'
});
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy