All Components

RTL Support

You can activate the right-to-left functionality by adding the k-rtl class to the container of the MultiColumnComboBox.

If you use a Kendo UI LESS-based theme, register the kendo.rtl.[min].css file too.

The following example demonstrates how to utilize the RTL support for the MultiColumnComboBox.

<div id="vueapp" class="vue-app">
    <div class="k-rtl">
        <kendo-multicolumncombobox :data-text-field="'ProductName'"
                                   :data-value-field="'UnitsInStock'"
                                   :data-source="dataSourceArray"
                                   style="width:600px">
            <kendo-multicolumncombobox-column :field="'ProductName'"
                                              :title="'Product Name'">
            </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>
</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
            }]
        }
    }
})
In this article