Your search did not match any results.
Common

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.

@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 int[] { 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.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; 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 string[] { "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; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static List<EuCountry> EuropeanUnion { get { return new List<EuCountry> { 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; }