Right-to-Left Support
The DevExtreme Editor components support right-to-left (RTL) languages. The components can display content in a right-to-left direction and mirror associated UI elements.
To enable RTL language support in the application, you can either set the globalConfig object's rtlEnabled property to true or specify each component's rtlEnabled property individually. Note that individual RTL parameters have higher priority than general parameters.
In this demo, you can use the language drop-down menu (for example, change the language from English to Arabic) to explore the differences between default and RTL modes.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@model DevExtreme.MVC.Demos.ViewModels.RtlViewModel
<div id="form" class="@(Model.RtlEnabled ? "dx-rtl" : "")">
<div class="options">
<div class="caption">Options</div>
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Language</div>
<div class="dx-field-value">
@(Html.DevExtreme().SelectBox()
.RtlEnabled(Model.RtlEnabled)
.InputAttr("aria-label", "Language")
.DataSource(Model.LanguageItems)
.Value(Model.RtlEnabled ? Model.LanguageItems.First() : Model.LanguageItems.Last())
.OnValueChanged("selectBox_valueChanged"))
</div>
</div>
</div>
</div>
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Text Box</div>
<div class="dx-field-value">
@(Html.DevExtreme().TextBox()
.RtlEnabled(Model.RtlEnabled)
.InputAttr("aria-label", "Text Box")
.ShowClearButton(true)
.Value(Model.Text))
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Number Box</div>
<div class="dx-field-value">
@(Html.DevExtreme().NumberBox()
.InputAttr("aria-label", "Number Box")
.RtlEnabled(Model.RtlEnabled)
.ShowSpinButtons(true)
.Value(123))
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Select Box</div>
<div class="dx-field-value">
@(Html.DevExtreme().SelectBox()
.RtlEnabled(Model.RtlEnabled)
.InputAttr("aria-label", "European Union Data")
.DataSource(d => d.Mvc().Controller("Common").LoadAction("GetEuropeanUnionData").Key("ID"))
.ValueExpr("ID")
.DisplayExpr(Model.DisplayExpr)
.Value(1))
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Tag Box</div>
<div class="dx-field-value">
@(Html.DevExtreme().TagBox()
.InputAttr("aria-label", "Name")
.RtlEnabled(Model.RtlEnabled)
.DataSource(d => d.Mvc().Controller("Common").LoadAction("GetEuropeanUnionData").Key("ID"))
.ValueExpr("ID")
.DisplayExpr(Model.DisplayExpr)
.Value(new[] { 1 })
.Placeholder("..."))
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Text Area</div>
<div class="dx-field-value">
@(Html.DevExtreme().TextArea()
.RtlEnabled(Model.RtlEnabled)
.Value(Model.Text))
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Autocomplete</div>
<div class="dx-field-value">
@(Html.DevExtreme().Autocomplete()
.RtlEnabled(Model.RtlEnabled)
.InputAttr("aria-label", "Autocomplete")
.DataSource(d => d.Mvc().Controller("Common").LoadAction("GetEuropeanUnionData").Key("ID"))
.ValueExpr(Model.DisplayExpr))
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Check Box</div>
<div class="dx-field-value">
@(Html.DevExtreme().CheckBox()
.RtlEnabled(Model.RtlEnabled)
.Value(true)
.Text(Model.Text))
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Switch</div>
<div class="dx-field-value">
@(Html.DevExtreme().Switch()
.RtlEnabled(Model.RtlEnabled))
</div>
</div>
</div>
</div>
<script>
function selectBox_valueChanged(data) {
var setRTL = data.value === "@Model.LanguageItems.FirstOrDefault()";
document.cookie = "direction=" + (setRTL ? "rtl" : "ltr") + "; path=/";
window.location.reload();
}
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models;
using DevExtreme.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DevExtreme.MVC.Demos.Models.DataGrid;
namespace DevExtreme.MVC.Demos.Controllers {
public class CommonController : Controller {
public ActionResult EditorsRightToLeftSupport() {
var directionCookie = Request.Cookies["direction"];
var rtl = directionCookie != null && directionCookie.Value == "rtl";
return View(new RtlViewModel {
LanguageItems = new[] {
"Arabic: Right-to-Left direction",
"English: Left-to-Right direction"
},
Text = rtl ? "نص" : "text",
DisplayExpr = rtl ? "NameAr" : "NameEn",
RtlEnabled = rtl
});
}
[HttpGet]
public ActionResult GetEuropeanUnionData(DataSourceLoadOptions loadOptions) {
return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(SampleData.EuropeanUnion, loadOptions)), "application/json");
}
}
}
namespace DevExtreme.MVC.Demos.Models {
public class EuCountry {
public int ID { get; set; }
public string NameAr { get; set; }
public string NameEn { get; set; }
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<EuCountry> EuropeanUnion = new[] {
new EuCountry {
ID = 1,
NameAr = "النمسا",
NameEn = "Austria"
}, new EuCountry {
ID = 2,
NameAr = "بلجيكا",
NameEn = "Belgium"
}, new EuCountry {
ID = 3,
NameAr = "بلغاريا",
NameEn = "Bulgaria"
}, new EuCountry {
ID = 4,
NameAr = "كرواتيا",
NameEn = "Croatia"
}, new EuCountry {
ID = 5,
NameAr = "قبرص",
NameEn = "Cyprus"
}, new EuCountry {
ID = 6,
NameAr = "الجمهورية التشيكية",
NameEn = "Czech Republic"
}, new EuCountry {
ID = 7,
NameAr = "الدنمارك",
NameEn = "Denmark"
}, new EuCountry {
ID = 8,
NameAr = "استونيا",
NameEn = "Estonia"
}, new EuCountry {
ID = 9,
NameAr = "فنلندا",
NameEn = "Finland"
}, new EuCountry {
ID = 10,
NameAr = "فرنسا",
NameEn = "France"
}, new EuCountry {
ID = 11,
NameAr = "ألمانيا",
NameEn = "Germany"
}, new EuCountry {
ID = 12,
NameAr = "يونان",
NameEn = "Greece"
}, new EuCountry {
ID = 13,
NameAr = "هنغاريا",
NameEn = "Hungary"
}, new EuCountry {
ID = 14,
NameAr = "أيرلندا",
NameEn = "Ireland"
}, new EuCountry {
ID = 15,
NameAr = "إيطاليا",
NameEn = "Italy"
}, new EuCountry {
ID = 16,
NameAr = "لاتفيا",
NameEn = "Latvia"
}, new EuCountry {
ID = 17,
NameAr = "ليتوانيا",
NameEn = "Lithuania"
}, new EuCountry {
ID = 18,
NameAr = "لوكسمبورغ",
NameEn = "Luxembourg"
}, new EuCountry {
ID = 19,
NameAr = "مالطا",
NameEn = "Malta"
}, new EuCountry {
ID = 20,
NameAr = "هولندا",
NameEn = "Netherlands"
}, new EuCountry {
ID = 21,
NameAr = "بولندا",
NameEn = "Poland"
}, new EuCountry {
ID = 22,
NameAr = "البرتغال",
NameEn = "Portugal"
}, new EuCountry {
ID = 23,
NameAr = "رومانيا",
NameEn = "Romania"
}, new EuCountry {
ID = 24,
NameAr = "سلوفاكيا",
NameEn = "Slovakia"
}, new EuCountry {
ID = 25,
NameAr = "سلوفينيا",
NameEn = "Slovenia"
}, new EuCountry {
ID = 26,
NameAr = "إسبانيا",
NameEn = "Spain"
}, new EuCountry {
ID = 27,
NameAr = "السويد",
NameEn = "Sweden"
}, new EuCountry {
ID = 28,
NameAr = "المملكة المتحدة",
NameEn = "United Kingdom"
}
};
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.Demos.ViewModels {
public class RtlViewModel {
public IEnumerable<string> LanguageItems { get; set; }
public string Text { get; set; }
public string DisplayExpr { get; set; }
public bool RtlEnabled { get; set; }
}
}
#form {
min-height: 587px;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.options .dx-fieldset {
margin: 0;
}
.option {
margin-top: 10px;
}
.caption {
font-size: 18px;
font-weight: 500;
padding-right: 15px;
}
.option > span {
margin-right: 10px;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}