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

TagTemplate

configuration

The template used to render the tags.

tagTemplate

String|Function

Template Data for the 'multiple' tagMode

data `Object`

The dataitem that corresponds to the selected value.

Template Data for the 'single' tagMode

data.values `Array`

A list of the selected values.

data.dataItems `Array`

A list of the selected data items.

data.currentTotal `Array`

The current dataSource total value. If it is server filtered, it will show the current length of the view.

data.maxTotal `Array`

The maximum total value of the dataSource. Unlike the currentTotal, this value will keep the maximum reached total value. Usable when the tag shows the total of the available items.

<select id="multiselect" multiple="multiple"></select>
<script id="tagTemplate" type="text/x-kendo-template">
  <span>
    <img src="/img/#: id #.png" alt="#: name #" />
    #: name #
  </span>
</script>
<script>
$("#multiselect").kendoMultiSelect({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  dataValueField: "id",
  tagTemplate: kendo.template($("#tagTemplate").html())
});
</script>

<select id="multiselect" multiple="multiple"></select>
<script>
$("#multiselect").kendoMultiSelect({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  dataValueField: "id",
  tagTemplate: '<span><img src="/img/#: id #.png" alt="#: name #" />#: name #</span>'
});
</script>

<select id="multiselect" multiple="multiple"></select>
<script id="tagTemplate" type="text/x-kendo-template">
    # if (values.length < 3) { #
        # for (var idx = 0; idx < values.length; idx++) { #
            #:values[idx]#
            # if (idx < values.length - 1) {#, # } #
        # } #
    # } else { #
       #:values.length# out of #:maxTotal#
    # } #
</script>
<script>
$("#multiselect").kendoMultiSelect({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" },
    { id: 2, name: "Bananas" }
  ],
  dataTextField: "name",
  dataValueField: "id",
  tagTemplate: kendo.template($("#tagTemplate").html()),
  tagMode: "single"
});
</script>