Telerik Extensions for ASP.NET MVC

This help topic shows how to enable the right-to-left (RTL) support of Telerik Extensions for ASP.NET MVC.

Right-to-left mode (also known as RTL) means that text starts at the right-hand side of a page and continues to the left one. Some notable examples are Arabic, Persian and Hebrew languages.

All UI components from Telerik Extensions for ASP.NET MVC support natively right-to-left mode. To enable this support you should follow these steps:

  1. Register telerik.rtl.css in your page after telerik.common.css.

    If you are using the StyleSheetRegistrar extension you can use this code:

    CopyRegistering telerik.rtl.css with the StyleSheetRegistrar
    <%= Html.Telerik().StyleSheetRegistrar()
            .DefaultGroup(group => group
              .Add("telerik.rtl.css") // <- registering telerik.rtl.css *after* telerik.common.css
              // the rest is ommitted for brevity

    If you are including the CSS files manually, you can use this markup:

    CopyManually including telerik.rtl.css
    <link rel="stylesheet" type="text/css" href="<%= Url.Content("~/Content/2010.3.1027/telerik.rtl.css") %>" />
    The version in this case depends on the version of the Telerik.Web.Mvc.dll assembly.

  2. Apply the "t-rtl" CSS class to *any* parent HTML element of the UI component of interest. The "t-rtl" class is just a marker class and only applies "direction:rtl" to that element.
    CopyApplying the t-rtl CSS class to a parent element
    <div id="header" class="t-rtl">
    <%= Html.Telerik().Menu()
    If the parent HTML element already has a CSS class append the "t-rtl" at the end: <div class="header t-rtl">
If both steps are performed correctly, the direction of the UI component will change from left-to-right to right-to-left.