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

PrefixOptions

configuration

The configuration for the prefix adornment of the component.

prefixOptions

Object

<input id="prefix" />
<script>
  $("#prefix").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" }
    ],
    prefixOptions: {
      template: () => `${kendo.ui.icon("search")}`
    }
  });
</script>

prefixOptions.icon

String

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

<input id="prefix" />
<script>
  $("#prefix").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" }
    ],
    prefixOptions: {
      icon: "search"
    }
  })
</script>

prefixOptions.separator

Boolean

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

Default: true

<input id="prefix" />
<script>
  $("#prefix").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" }
    ],
    prefixOptions: {
      template: () => `${kendo.ui.icon("search")}`,
      separator: false
    }
  })
</script>

prefixOptions.template

String|Function

The template for the prefix adornment of the component.

<input id="prefix" />
<script>
  $("#prefix").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" }
    ],
    prefixOptions: {
      template: () => `${kendo.ui.icon("search")}`
    }
  })
</script>