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
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 System;
using System.Linq;
using System.Text.Json;
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[] {
"Arabic: Right-to-Left direction",
"English: Left-to-Right direction"
},
DisplayExpr = rtl ? "NameAr" : "NameEn",
RtlEnabled = rtl
});
}
[HttpGet]
public ActionResult GetContinentsData(DataSourceLoadOptions loadOptions) {
return Content(JsonSerializer.Serialize(DataSourceLoader.Load(SampleData.Continents, loadOptions)), "application/json");
}
[HttpGet]
public ActionResult GetEuropeanCountriesData(DataSourceLoadOptions loadOptions) {
return Content(JsonSerializer.Serialize(DataSourceLoader.Load(SampleData.EuropeanCountries.Take(4), loadOptions)), "application/json");
}
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<GeoInfo> Continents = new[] {
new GeoInfo {
ID = "1",
NameEn = "Africa",
NameAr = "أفريقيا",
Items = new[] {
new GeoInfo {
ID = "1_2",
NameEn = "Ethiopia",
NameAr = "أثيوبيا",
Items = new[] {
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[] {
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[] {
new GeoInfo {
ID = "2_1",
NameEn = "China",
NameAr = "الصين",
Items = new[] {
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[] {
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[] {
new GeoInfo {
ID = "3_1",
NameEn = "Australia",
NameAr = "أستراليا",
Items = new[] {
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[] {
new GeoInfo {
ID = "4_1",
NameEn = "Germany",
NameAr = "ألمانيا",
Items = new[] {
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[] {
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[] {
new GeoInfo {
ID = "5_2",
NameEn = "Mexico",
NameAr = "المكسيك",
Items = new[] {
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[] {
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[] {
new GeoInfo {
ID = "6_1",
NameEn = "Brazil",
NameAr = "البرازيل",
Items = new[] {
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[] {
new GeoInfo {
ID = "6_2_1",
NameEn = "Bogota",
NameAr = "بوغوتا"
},
new GeoInfo {
ID = "6_2_2",
NameEn = "Medellin",
NameAr = "ميديلين"
}
}
}
}
}
};
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<EuropeanCountry> EuropeanCountries = new[] {
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: rgba(191, 191, 191, 0.15);
margin-bottom: 20px;
}
.options .dx-fieldset {
margin: 0;
}
.caption {
font-size: 18px;
font-weight: 500;
padding-right: 15px;
}
.dx-theme-material .dx-accordion .dx-accordion-item-opened .dx-accordion-item-title {
padding-top: 20px;
}
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.