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

SuffixOptions

configuration

The configuration for the suffix adornment of the component.

suffixOptions

Object

<input id="suffix" />
<script>
  $("#suffix").kendoMultiColumnComboBox({
    label: "MultiColumnComboBox",
    dataTextField: "text",
    dataValueField: "value",
    dataSource: {
        data:  [
            { text: "Apples", value: "1" },
            { text: "Oranges", value: "2" }
        ]
    },
    columns: [
        { field: "text", title: "Text" },
        { field: "value", title: "Value" }
    ],
    suffixOptions: {
      template: () => `${kendo.ui.icon("search")}`
    }
  });
</script>

suffixOptions.icon

String

Defines the name for an existing icon in a Kendo UI theme or SVG content

<input id="suffix" />
<script>
  $("#suffix").kendoMultiColumnComboBox({
    label: "MultiColumnComboBox",
    dataTextField: "text",
    dataValueField: "value",
    dataSource: {
        data:  [
            { text: "Apples", value: "1" },
            { text: "Oranges", value: "2" }
        ]
    },
    columns: [
        { field: "text", title: "Text" },
        { field: "value", title: "Value" }
    ],
    suffixOptions: {
      icon: "search"
    }
  })
</script>

suffixOptions.separator

Boolean

If set to false, the suffix adornment will not have a separator.

Default: true

<input id="suffix" />
<script>
  $("#suffix").kendoMultiColumnComboBox({
    label: "MultiColumnComboBox",
    dataTextField: "text",
    dataValueField: "value",
    dataSource: {
        data:  [
            { text: "Apples", value: "1" },
            { text: "Oranges", value: "2" }
        ]
    },
    columns: [
        { field: "text", title: "Text" },
        { field: "value", title: "Value" }
    ],
    suffixOptions: {
      template: () => `${kendo.ui.icon("search")}`,
      separator: false
    }
  })
</script>

suffixOptions.template

String|Function

The template for the suffix adornment of the component.

<input id="suffix" />
<script>
  $("#suffix").kendoMultiColumnComboBox({
    label: "MultiColumnComboBox",
    dataTextField: "text",
    dataValueField: "value",
    dataSource: {
        data:  [
            { text: "Apples", value: "1" },
            { text: "Oranges", value: "2" }
        ]
    },
    columns: [
        { field: "text", title: "Text" },
        { field: "value", title: "Value" }
    ],
    suffixOptions: {
      template: () => `${kendo.ui.icon("search")}`
    }
  })
</script>