Right-to-Left Support

Right-to-left (RTL) support refers to the ability of a library, website, or application to handle and respond to users who communicate through a right-to-left language such as Arabic, Hebrew, Chinese or Japanese.

The default language input for most users of the web is left-to-right. However, many websites and applications wish to also provide RTL support for their visitors. The RTL functionality falls more into the internationalization space but can be considered as an accessibility feature as well. After all, RTL is about making user experiences more accessible for visitors who use right-to-left languages.

Configuration

Unless you are building an application that exclusively uses RTL languages, it is intuitive to apply the RTL support feature based on external input, such as language selection or information from the user agent of a visitor. In that case, you can apply the k-rtl class at runtime using the jQuery addClass method.

For example, if you want to allow the user to trigger RTL support by selecting a language from a drop-down list or by clicking a button:

1. Add a button to your page by using the <input type="button" id="toggleRTL" value="Activate RTL Support" class="k-button" /> setting.
2. Add a click handler for the button and toggle RTL support by adding or removing the k-rtl class to a form, in this case, a collection of form fields to which you assigned an ID of speakerForm. With that handler in place, the user can now trigger RTL support on demand.

Razor

    $('#toggleRTL').on('click', function(event) {
        var form = $('#speakerForm');

        if (form.hasClass('k-rtl')) {
            form.removeClass('k-rtl')
        } else {
            form.addClass('k-rtl');
        }
    })

Supported Telerik UI for ASP.NET MVC Components

The following table lists the Telerik UI for ASP.NET MVC Components that support rendering of content in a right-to-left direction for right-to-left languages, such as Arabic, Hebrew, Chinese, or Japanese.

Component	RTL Support	Demo
AutoComplete	Yes	Browse
BottomNavigation	Yes	Browse
Breadcrumb	Yes	Browse
Button	Yes	Browse
ButtonGroup	Yes	Browse
Calendar	Yes	Browse
Charts	Yes	Browse
CheckBoxGroup	Yes	Browse
ComboBox	Yes	Browse
DateInput	Yes	Browse
DatePicker	Yes	Browse
DateTimePicker	Yes	Browse
Dialog	Yes	Browse
DropDownList	Yes	Browse
DropDownTree	Yes	Browse
Editor	Yes	Browse
ExpansionPanel	Yes	Browse
FileManager	Yes	Browse
FloatingActionButton	Yes	Browse
Gantt	Yes	Browse
Grid	Yes	Browse
ListBox	Yes	Browse
ListView	Yes	Browse
MaskedTextbox	Yes	Browse
Menu	Yes	Browse
MultiColumnComboBox	Yes	Browse
MultiSelect	Yes	Browse
Notification	Yes	Browse
NumericTextbox	Yes	Browse
PanelBar	Yes	Browse
RadioGroup	Yes	Browse
Scheduler	Yes	Browse
Slider	Yes	Browse
Splitter	Yes	Browse
Stepper	Yes	Browse
Switch	Yes	Browse
TabStrip	Yes	Browse
TaskBoard	Yes	Browse
TextArea	Yes	Browse
TextBox	Yes	Browse
TimePicker	Yes	Browse
TreeView	Yes	Browse
Upload	Yes	Browse
Window	Yes	Browse

Known Limitations

• Vertical scrollbar position may be on the left or right side depending on the used browser. This cannot be controlled via CSS or script.
• The layout of the Kendo UI ListView widget depends entirely on the defined template. The widget itself does nothing to convert an existing LTR template to RTL layout. If a k-rtl CSS class is present and applied to a wrapper element, text direction will be reversed, but floats, margins, paddings, etc., will keep their orientation.
• Kendo UI Splitter does not reverse the order of its panes in RTL mode.