@model DevExtreme.NETCore.Demos.ViewModels.RtlViewModel
<div id="rtl" 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>
<div class="dx-fieldset">
<div class="dx-fieldset-header">
@(Html.DevExtreme().Menu()
.DataSource(d => d.Mvc().Controller("Common").LoadAction("GetContinentsData").Key("ID"))
.RtlEnabled(Model.RtlEnabled)
.ItemsExpr("Items")
.DisplayExpr(Model.DisplayExpr))
</div>
</div>
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">
@(Html.DevExtreme().TreeView()
.Width(200)
.DataSource(d => d.Mvc().Controller("Common").LoadAction("GetContinentsData").Key("ID"))
.RtlEnabled(Model.RtlEnabled)
.ItemsExpr("Items")
.DisplayExpr(Model.DisplayExpr))
</div>
<div class="dx-field-value">
@(Html.DevExtreme().Accordion()
.DataSource(d => d.Mvc().Controller("Common").LoadAction("GetEuropeanCountriesData").Key("NameEn"))
.RtlEnabled(Model.RtlEnabled)
.ItemTitleTemplate(@<text>
@if(Model.RtlEnabled) {
<div><%- NameAr %></div>
} else {
<div><%- NameEn %></div>
}
</text>)
.ItemTemplate(@<text>
@if(Model.RtlEnabled) {
<div>
<div>عاصمة: <%- CapitalAr %></div>
<div>عدد السكان: <%- Population %> نسمة</div>
<div>المساحة: <%- Area %> كم<sup>2</sup></div>
</div>
} else {
<div>
<div>Capital: <%- CapitalEn %></div>
<div>Population: <%- Population %> people</div>
<div>Area: <%- Area %> km<sup>2</sup></div>
</div>
}
</text>)
)
</div>
</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 System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using DevExtreme.AspNet.Mvc;
using Newtonsoft.Json;
using DevExtreme.AspNet.Data;
using DevExtreme.NETCore.Demos.Models;
using DevExtreme.NETCore.Demos.Models.SampleData;
using DevExtreme.NETCore.Demos.ViewModels;
using DevExtreme.NETCore.Demos.Models.DataGrid;
// For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
namespace DevExtreme.NETCore.Demos.Controllers {
public class CommonController : Controller {
public ActionResult NavigationRightToLeftSupport() {
var rtl = Request.Cookies.ContainsKey("direction") && Request.Cookies["direction"] == "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 object GetContinentsData(DataSourceLoadOptions loadOptions) {
return DataSourceLoader.Load(SampleData.Continents, loadOptions);
}
[HttpGet]
public object GetEuropeanCountriesData(DataSourceLoadOptions loadOptions) {
return DataSourceLoader.Load(SampleData.EuropeanCountries.Take(4), loadOptions);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace DevExtreme.NETCore.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;
using System.Linq;
namespace DevExtreme.NETCore.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.Collections.Generic;
namespace DevExtreme.NETCore.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;
}