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

Columns

configuration

Defines the columns rendered in the table of the MultiColumnComboBox.

columns

Array

<input id="multicolumncombobox" />
<script>
    $("#multicolumncombobox").kendoMultiColumnComboBox({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [
            { text: "Apples", value: "1" },
            { text: "Oranges", value: "2" }
        ],
        columns: [
            { field: "text", title: "Text" },
            { field: "value", title: "Value" }
        ]
    });
</script>

columns.field

String

Defines the field for the column.

<input id="multicolumncombobox" />
<script>
    $("#multicolumncombobox").kendoMultiColumnComboBox({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [
            { text: "Apples", value: "1" },
            { text: "Oranges", value: "2" }
        ],
        columns: [
            { field: "text", title: "Text" },
            { field: "value", title: "Value" }
        ]
    });
</script>

columns.headerTemplate

String|Function

Renders a template for the column header.

<input id="multicolumncombobox" />
<script>
    $("#multicolumncombobox").kendoMultiColumnComboBox({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [
            { text: "Apples", value: "1" },
            { text: "Oranges", value: "2" }
        ],
        columns: [
            { field: "text", headerTemplate: "<strong>Text</strong>" },
            { field: "value", headerTemplate: "<strong>Value</strong>" }
        ]
    });
</script>

columns.template

String|Function

Renders a template for the column.

<input id="multicolumncombobox" />
<script>
    $("#multicolumncombobox").kendoMultiColumnComboBox({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [
            { text: "Apples", value: "1" },
            { text: "Oranges", value: "2" }
        ],
        columns: [
            { field: "text", title: "Text", template: "Text: #:text#" },
            { field: "value", title: "Value", template: "Value: <strong>#:value#</strong>" }
        ]
    });
</script>

columns.title

String

Defines the text of the column title in the header.

<input id="multicolumncombobox" />
<script>
    $("#multicolumncombobox").kendoMultiColumnComboBox({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [
            { text: "Apples", value: "1" },
            { text: "Oranges", value: "2" }
        ],
        columns: [
            { field: "text", title: "Text" },
            { field: "value", title: "Value" }
        ]
    });
</script>

columns.width

String|Number

The width of the column. Numeric values are treated as pixels.

<input id="multicolumncombobox" />
<script>
    $("#multicolumncombobox").kendoMultiColumnComboBox({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [
            { text: "Apples", value: "1" },
            { text: "Oranges", value: "2" }
        ],
        columns: [
            { field: "text", headerTemplate: "<strong>Text</strong>", width: "100px" },
            { field: "value", headerTemplate: "<strong>Value</strong>", width: 100 }
        ]
    });
</script>