Your search did not match any results.
Common

Right-to-Left Support

The Navigation widgets fully support RTL languages. As is illustrated in this demo, the Navigation 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.
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 NavigationRightToLeftSupport() { 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" }, DisplayExpr = rtl ? "NameAr" : "NameEn", RtlEnabled = rtl }); } [HttpGet] public ActionResult GetContinentsData(DataSourceLoadOptions loadOptions) { return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(SampleData.Continents, loadOptions)), "application/json"); } [HttpGet] public ActionResult GetEuropeanCountriesData(DataSourceLoadOptions loadOptions) { return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(SampleData.EuropeanCountries.Take(4), loadOptions)), "application/json"); } } }
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<GeoInfo> Continents { get { return new List<GeoInfo> { new GeoInfo { ID = "1", NameEn = "Africa", NameAr = "أفريقيا", Items = new List<GeoInfo> { new GeoInfo { ID = "1_2", NameEn = "Ethiopia", NameAr = "أثيوبيا", Items = new List<GeoInfo> { new GeoInfo { ID = "1_2_1", NameEn = "Addis Ababa", NameAr = "أديس أبابا" }, new GeoInfo { ID = "1_2_2", NameEn = "Dire Dawa", NameAr = "دير داوا" } } }, new GeoInfo { ID = "1_1", NameEn = "Nigeria", NameAr = "نيجيريا", Items = new List<GeoInfo> { new GeoInfo { ID = "1_1_1", NameEn = "Lagos", NameAr = "لاغوس" }, new GeoInfo { ID = "1_1_2", NameEn = "Kano", NameAr = "كانو" } } } } }, new GeoInfo { ID = "2", NameEn = "Asia", NameAr = "آسيا", Items = new List<GeoInfo> { new GeoInfo { ID = "2_1", NameEn = "China", NameAr = "الصين", Items = new List<GeoInfo> { new GeoInfo { ID = "2_1_1", NameEn = "Beijing", NameAr = "بكين" }, new GeoInfo { ID = "2_1_2", NameEn = "Shanghai", NameAr = "شنغهاي" } } }, new GeoInfo { ID = "2_2", NameEn = "India", NameAr = "الهند", Items = new List<GeoInfo> { new GeoInfo { ID = "2_2_1", NameEn = "Indianapolis", NameAr = "انديانابوليس" }, new GeoInfo { ID = "2_2_2", NameEn = "New Delhi", NameAr = "نيودلهي" } } } } }, new GeoInfo { ID = "3", NameEn = "Australia", NameAr = "أستراليا", Items = new List<GeoInfo> { new GeoInfo { ID = "3_1", NameEn = "Australia", NameAr = "أستراليا", Items = new List<GeoInfo> { new GeoInfo { ID = "3_1_1", NameEn = "Canberra", NameAr = "كانبيرا" }, new GeoInfo { ID = "3_1_2", NameEn = "Melbourne", NameAr = "ملبورن" }, new GeoInfo { ID = "3_1_3", NameEn = "Sydney", NameAr = "سيدني" } } } } }, new GeoInfo { ID = "4", NameEn = "Europe", NameAr = "أوروبا", Items = new List<GeoInfo> { new GeoInfo { ID = "4_1", NameEn = "Germany", NameAr = "ألمانيا", Items = new List<GeoInfo> { new GeoInfo { ID = "4_1_1", NameEn = "Berlin", NameAr = "البرلينية" }, new GeoInfo { ID = "4_1_2", NameEn = "Hamburg", NameAr = "هامبورغ" } } }, new GeoInfo { ID = "4_2", NameEn = "Russia", NameAr = "روسيا", Items = new List<GeoInfo> { new GeoInfo { ID = "4_2_1", NameEn = "Moscow", NameAr = "موسكو" }, new GeoInfo { ID = "4_2_2", NameEn = "Saint Petersburg", NameAr = "سانت بطرسبرغ" } } } } }, new GeoInfo { ID = "5", NameEn = "North America", NameAr = "أمريكا الشمالية", Items = new List<GeoInfo> { new GeoInfo { ID = "5_2", NameEn = "Mexico", NameAr = "المكسيك", Items = new List<GeoInfo> { new GeoInfo { ID = "5_2_1", NameEn = "Mexico City", NameAr = "مكسيكو سيتي" }, new GeoInfo { ID = "5_2_2", NameEn = "Guadalajara", NameAr = "غوادالاخارا" } } }, new GeoInfo { ID = "5_1", NameEn = "United States", NameAr = "الولايات المتحدة الأمريكية", Items = new List<GeoInfo> { new GeoInfo { ID = "5_1_1", NameEn = "New York", NameAr = "نيويورك" }, new GeoInfo { ID = "5_1_2", NameEn = "Washington", NameAr = "واشنطن" } } } } }, new GeoInfo { ID = "6", NameEn = "South America", NameAr = "أمريكا الجنوبية", Items = new List<GeoInfo> { new GeoInfo { ID = "6_1", NameEn = "Brazil", NameAr = "البرازيل", Items = new List<GeoInfo> { new GeoInfo { ID = "6_1_1", NameEn = "Brasilia", NameAr = "برازيليا" }, new GeoInfo { ID = "6_1_2", NameEn = "Sao Paulo", NameAr = "ساو باولو" } } }, new GeoInfo { ID = "6_2", NameEn = "Colombia", NameAr = "كولومبيا", Items = new List<GeoInfo> { new GeoInfo { ID = "6_2_1", NameEn = "Bogota", NameAr = "بوغوتا" }, new GeoInfo { ID = "6_2_2", NameEn = "Medellin", NameAr = "ميديلين" } } } } } }; } } } }
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<EuropeanCountry> EuropeanCountries { get { return new List<EuropeanCountry> { new EuropeanCountry { NameAr = "النمسا", NameEn = "Austria", Population = 8451900, Area = 83855, CapitalAr = "فيينا", CapitalEn = "Vienna", Accession = 1995 }, new EuropeanCountry { NameAr = "بلجيكا", NameEn = "Belgium", Population = 11161600, Area = 30528, CapitalAr = "بروكسل", CapitalEn = "Brussels", Accession = 1957 }, new EuropeanCountry { NameAr = "بلغاريا", NameEn = "Bulgaria", Population = 7284600, Area = 110994, CapitalAr = "صوفيا", CapitalEn = "Sofia", Accession = 2007 }, new EuropeanCountry { NameAr = "كرواتيا", NameEn = "Croatia", Population = 4262100, Area = 56594, CapitalAr = "زغرب", CapitalEn = "Zagreb", Accession = 2013 }, new EuropeanCountry { NameAr = "قبرص", NameEn = "Cyprus", Population = 865900, Area = 9251, CapitalAr = "نيقوسيا", CapitalEn = "Nicosia", Accession = 2004 }, new EuropeanCountry { NameAr = "الجمهورية التشيكية", NameEn = "Czech Republic", Population = 10516100, Area = 78866, CapitalAr = "براغ", CapitalEn = "Prague", Accession = 2004 }, new EuropeanCountry { NameAr = "الدنمارك", NameEn = "Denmark", Population = 5602600, Area = 43075, CapitalAr = "كوبنهاغن", CapitalEn = "Copenhagen", Accession = 1973 }, new EuropeanCountry { NameAr = "استونيا", NameEn = "Estonia", Population = 1324800, Area = 45227, CapitalAr = "تالين", CapitalEn = "Tallinn", Accession = 2004 }, new EuropeanCountry { NameAr = "فنلندا", NameEn = "Finland", Population = 5426700, Area = 338424, CapitalAr = "هلسنكي", CapitalEn = "Helsinki", Accession = 1995 }, new EuropeanCountry { NameAr = "فرنسا", NameEn = "France", Population = 65633200, Area = 674843, CapitalAr = "باريس", CapitalEn = "Paris", Accession = 1957 }, new EuropeanCountry { NameAr = "ألمانيا", NameEn = "Germany", Population = 80523700, Area = 357021, CapitalAr = "البرلينية", CapitalEn = "Berlin", Accession = 1957 }, new EuropeanCountry { NameAr = "يونان", NameEn = "Greece", Population = 11062500, Area = 131990, CapitalAr = "أثينا", CapitalEn = "Athens", Accession = 1981 }, new EuropeanCountry { NameAr = "هنغاريا", NameEn = "Hungary", Population = 9908800, Area = 93030, CapitalAr = "بودابست", CapitalEn = "Budapest", Accession = 2004 }, new EuropeanCountry { NameAr = "أيرلندا", NameEn = "Ireland", Population = 4591100, Area = 70273, CapitalAr = "دبلن", CapitalEn = "Dublin", Accession = 1973 }, new EuropeanCountry { NameAr = "إيطاليا", NameEn = "Italy", Population = 59685200, Area = 301338, CapitalAr = "روما", CapitalEn = "Rome", Accession = 1957 }, new EuropeanCountry { NameAr = "لاتفيا", NameEn = "Latvia", Population = 2023800, Area = 64589, CapitalAr = "ريغا", CapitalEn = "Riga", Accession = 2004 }, new EuropeanCountry { NameAr = "ليتوانيا", NameEn = "Lithuania", Population = 2971900, Area = 65200, CapitalAr = "فيلنيوس", CapitalEn = "Vilnius", Accession = 2004 }, new EuropeanCountry { NameAr = "لوكسمبورغ", NameEn = "Luxembourg", Population = 537000, Area = 2586.4, CapitalAr = "لوكسمبورغ", CapitalEn = "Luxembourg", Accession = 1957 }, new EuropeanCountry { NameAr = "مالطا", NameEn = "Malta", Population = 421400, Area = 316, CapitalAr = "فاليتا", CapitalEn = "Valletta", Accession = 2004 }, new EuropeanCountry { NameAr = "هولندا", NameEn = "Netherlands", Population = 16779600, Area = 41543, CapitalAr = "أمستردام", CapitalEn = "Amsterdam", Accession = 1957 }, new EuropeanCountry { NameAr = "بولندا", NameEn = "Poland", Population = 38533300, Area = 312685, CapitalAr = "وارسو", CapitalEn = "Warsaw", Accession = 2004 }, new EuropeanCountry { NameAr = "البرتغال", NameEn = "Portugal", Population = 10487300, Area = 92390, CapitalAr = "لشبونة", CapitalEn = "Lisbon", Accession = 1986 }, new EuropeanCountry { NameAr = "رومانيا", NameEn = "Romania", Population = 20057500, Area = 238391, CapitalAr = "بوخارست", CapitalEn = "Bucharest", Accession = 2007 }, new EuropeanCountry { NameAr = "سلوفاكيا", NameEn = "Slovakia", Population = 5410800, Area = 49035, CapitalAr = "براتيسلافا", CapitalEn = "Bratislava", Accession = 2004 }, new EuropeanCountry { NameAr = "سلوفينيا", NameEn = "Slovenia", Population = 2058800, Area = 20273, CapitalAr = "ليوبليانا", CapitalEn = "Ljubljana", Accession = 2004 }, new EuropeanCountry { NameAr = "إسبانيا", NameEn = "Spain", Population = 46704300, Area = 504030, CapitalAr = "مدريد", CapitalEn = "Madrid", Accession = 1986 }, new EuropeanCountry { NameAr = "السويد", NameEn = "Sweden", Population = 9555900, Area = 449964, CapitalAr = "ستوكهولم", CapitalEn = "Stockholm", Accession = 1995 }, new EuropeanCountry { NameAr = "المملكة المتحدة", NameEn = "United Kingdom", Population = 63730100, Area = 243610, CapitalAr = "لندن", CapitalEn = "London", Accession = 1973 } }; } } } }
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; } } }
sup { font-size: 0.8em; vertical-align: super; line-height: 0; } .options { padding: 20px; background-color: #f5f5f5; margin-bottom: 20px; } .options .dx-fieldset { margin: 0; } .caption { font-size: 18px; font-weight: 500; padding-right: 15px; }