RTL Support

You can activate the right-to-left functionality by adding the k-rtl class to the container of the Kendo UI Grid wrapper for Vue.

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

<div id="vueapp" class="vue-app">
    <div class="k-rtl">
        <kendo-grid :data-source="localDataSource"
                    :sortable="true"
                    :groupable="true"
                    :resizable="true"
                    :filterable="true"
                    :column-menu="true">
            <kendo-grid-column :field="'ProductName'" :width="180"></kendo-grid-column>
            <kendo-grid-column :field="'UnitPrice'"
                            :title="'Unit Price'"
                            :width="120"
                            :format="'{0:c}'"></kendo-grid-column>
            <kendo-grid-column :field="'Category'"
                            :title="'Category'"
                            :width="180"
                            :filterable="false"></kendo-grid-column>
            <kendo-grid-column :field="'Discontinued'" :width="120"></kendo-grid-column>
        </kendo-grid>
    </div>
</div>
Vue.use(GridInstaller);

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

In this article