All Components

Columns

The MultiColumnComboBox supports options for configuring the behavior of its columns.

To manage the columns of the MultiColumnComboBox, either:

For more information on the available props, refer to the multicolumncombobox.columns configuration.

Using the kendo-multicolumncombobox-columns Component

The following example demonstrates how to set the inline initialization of the kendo-multicolumncombobox-columns component.

<div id="vueapp" class="vue-app">
    <kendo-multicolumncombobox :data-text-field="'ProductName'"
                               :data-value-field="'ProductID'"
                               :data-source="dataSourceArray"
                               style="width:650px">
        <kendo-multicolumncombobox-column :field="'ProductID'"
                                          :title="'ID'"
                                          :width="70">
        </kendo-multicolumncombobox-column>
        <kendo-multicolumncombobox-column :field="'ProductName'"
                                          :title="'Product Name'">
        </kendo-multicolumncombobox-column>
        <kendo-multicolumncombobox-column :field="'Discontinued'">
        </kendo-multicolumncombobox-column>
        <kendo-multicolumncombobox-column :field="'UnitPrice'"
                                          :title="'Unit Price'"
                                          :format="'{0:c}'"
                                          :width="100">
        </kendo-multicolumncombobox-column>
        <kendo-multicolumncombobox-column :field="'UnitsInStock'"
                                          :title="'Units in Stock'"
                                          :width="150">
        </kendo-multicolumncombobox-column>
    </kendo-multicolumncombobox>
</div>
Vue.use(DropdownsInstaller);

new Vue({
    el: '#vueapp',
   data () {
        return {
        dataSourceArray: [{
                "ProductID": 1,
                "ProductName": "Chai",
                "UnitPrice": 18,
                "UnitsInStock": 39,
                "Discontinued": false
            },
            {
                "ProductID": 4,
                "ProductName": "Chef Anton",
                "UnitPrice": 22,
                "UnitsInStock": 53,
                "Discontinued": false
            },
            {
                "ProductID": 5,
                "ProductName": "Chef Gumbo Mix",
                "UnitPrice": 21.35,
                "UnitsInStock": 0,
                "Discontinued": true
            },
            {
                "ProductID": 6,
                "ProductName": "Boysenberry Spread",
                "UnitPrice": 25,
                "UnitsInStock": 120,
                "Discontinued": false
            }]
        }
    }
})

Using the data Vue Object

The following example demonstrates how to use the data object to specify the columns of the MultiColumnComboBox.

<div id="vueapp" class="vue-app">
    <kendo-multicolumncombobox :data-text-field="'ProductName'"
                               :data-value-field="'ProductID'"
                               :data-source="dataSourceArray"
                               :columns="columns"
                               style="width:200px">
    </kendo-multicolumncombobox>
</div>
Vue.use(DropdownsInstaller);

new Vue({
    el: '#vueapp',
   data () {
        return {
        columns: [
            { field: "ProductName", title: "Product Name", width: 180 },
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 150 },
            { field: "UnitsInStock", title: "Units In Stock", width: 150 },
            { field: "Discontinued", width: 150 }
        ],
        dataSourceArray: [{
                "ProductID": 1,
                "ProductName": "Chai",
                "UnitPrice": 18,
                "UnitsInStock": 39,
                "Discontinued": false
            },
            {
                "ProductID": 4,
                "ProductName": "Chef Anton",
                "UnitPrice": 22,
                "UnitsInStock": 53,
                "Discontinued": false
            },
            {
                "ProductID": 5,
                "ProductName": "Chef Gumbo Mix",
                "UnitPrice": 21.35,
                "UnitsInStock": 0,
                "Discontinued": true
            },
            {
                "ProductID": 6,
                "ProductName": "Boysenberry Spread",
                "UnitPrice": 25,
                "UnitsInStock": 120,
                "Discontinued": false
            }]
        }
    }
})
In this article