RTL Support

You can add k-rtl class for the container of the component, in order to activate the RTL functionality.

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

<div id="vueapp" class="vue-app k-rtl">
    <kendo-datasource ref="datasource1"
      :transport-read-data-type="'jsonp'" >

    <kendo-listview :data-source-ref="'datasource1'" :template="itemTemplate">

            float: right;
            width: 220px;
            height: 110px;
            margin: 0;
            padding: 5px;
            cursor: pointer;
        .product img
            float: right;
            width: 110px;
            height: 110px;
        .product h3
            margin: 0;
            padding: 10px 10px 0 0;
            font-size: .9em;
            overflow: hidden;
            font-weight: normal;
            float: right;
            max-width: 100px;
            text-transform: uppercase;
            border-top: 0;
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        #example .k-listview
            padding: 0;
            min-height: 360px;

new Vue({
    el: '#vueapp',
    data () {
        return {
            itemTemplate: `
                <div class="product">
                    <img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
                    <p>#:kendo.toString(UnitPrice, "c")#</p>

In this article