Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Right-to-Left Support
DevExtreme HTML5 Data Editor widgets fully support RTL languages. As is illustrated in this demo, Editor widgets are able to display their contents in a right-to-left direction and fully mirror associated UI elements. Use the language drop-down menu (change from English to Arabic) to explore the differences between default and RTL modes available in DevExtreme.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
@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)
.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)
.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()
.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)
.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()
.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)
.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;
}