All Components

Components / DropDowns / DropDownList

RTL Support

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

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 DropDownList.

<div id="vueapp" class="vue-app">
    <div class="k-rtl">
        <kendo-dropdownlist :data-source="dataSourceArray"
                            :data-text-field="'text'"
                            :data-value-field="'value'">
        </kendo-dropdownlist>
    </div>
</div>
Vue.use(DropdownsInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            dataSourceArray: [
                { text: 'Black', value: '1' },
                { text: 'Orange', value: '2' },
                { text: 'Grey', value: '3' }
            ]
        }
    }
})
In this article