All Components

Templates

The MultiColumnComboBox provides the means needed to define column template, column headerTemplate and footerTemplate.

The template and the header-template could be defined for each of the columns available in the widget. The footer-template and the no-data-template, on the other hand, are defined for the entire popup of the widget. The templates in the MultiColumnComboBox are rendered by using the Kendo UI templates.

Column Templates

The column template manages the way a given column values in the MultiColumnComboBox popup are rendered.

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

new Vue({
    el: '#vueapp',
    data () {
        return {
            nameColumnTemplate: "Name: <strong>#: ProductName #</strong>",
            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
            }]
        }
    }
})

Header Templates

The column header-template defines the header appearance and content for a givin column.

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

new Vue({
    el: '#vueapp',
    data () {
        return {
            nameColumnHeaderTemplate: "<strong>The Name of the Product</strong>",
            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
            }]
        }
    }
})

The footer-template manages the way the popup footer of the MultiColumnComboBox is rendered. The footer is re-rendered on every change of the Data Source. The context of the template is the component itself.

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

new Vue({
    el: '#vueapp',
    data () {
        return {
            footerTemplate: "Total <strong>#: instance.dataSource.total() #</strong> items found",
            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
            }]
        }
    }
})

No-Data Templates

The MultiColumnComboBox displays the no-data-template in its popup when the data source is empty.

When the noDataTemplate option is defined, the component always opens the popup element.

<div id="vueapp" class="vue-app">
    <kendo-multicolumncombobox :data-source="dataSourceArray"
                               :no-data-template="noDataTemplate">
    </kendo-multicolumncombobox>
</div>
Vue.use(DropdownsInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            noDataTemplate: "No Data!",
            dataSourceArray: []
        }
    }
})
In this article