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"
            <kendo-grid-column :field="'ProductName'" :width="180"></kendo-grid-column>
            <kendo-grid-column :field="'UnitPrice'"
                            :title="'Unit Price'"
            <kendo-grid-column :field="'Category'"
            <kendo-grid-column :field="'Discontinued'" :width="120"></kendo-grid-column>

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