All Components

Server Filtering

The MultiColumnComboBox allows you to use the server filtering functionality to display a subset of data.

Server-filtering relies on the filtering capability of the serverFiltering option of the Kendo UI Data Source component and the filter configuration of the MultiColumnComboBox.

You can use server filtering for displaying only a subset of data.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
                      :type="'odata'"
                      :server-filtering="true"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'">
    </kendo-datasource>
    <kendo-multicolumncombobox :data-source-ref="'datasource1'"
                               :placeholder="'Select product'"
                               :data-text-field="'ProductName'"
                               :data-value-field="'ProductID'"
                               :filter="'contains'"
                               :auto-bind="false"
                               :min-length="3"
                               style="width:200px">
        <kendo-multicolumncombobox-column :field="'ProductID'"
                                          :title="'ID'"
                                          :width="70">
        </kendo-multicolumncombobox-column>
        <kendo-multicolumncombobox-column :field="'ProductName'"
                                          :title="'Product Name'"
                                          :width="150">
        </kendo-multicolumncombobox-column>
        <kendo-multicolumncombobox-column :field="'QuantityPerUnit'"
                                          :title="'Quantity per Unit'"
                                          :width="150">
        </kendo-multicolumncombobox-column>
        <kendo-multicolumncombobox-column :field="'UnitPrice'"
                                          :title="'Unit Price'"
                                          :format="'{0:c}'"
                                          :width="150">
        </kendo-multicolumncombobox-column>
        <kendo-multicolumncombobox-column :field="'UnitsInStock'"
                                          :title="'Units in Stock'"
                                          :width="150">
        </kendo-multicolumncombobox-column>
    </kendo-multicolumncombobox>
    <br/>
    <em>Demo hint: Type 'cha'</em>
</div>
Vue.use(DropdownsInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {}
    }
})
In this article