www.wikipedia.org
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.MVC.Demos.Models
@model IEnumerable<EuropeanCountry>
@(Html.DevExtreme().DataGrid<EuropeanCountry>()
.ID("gridContainer")
.DataSource(Model, "NameEn")
.ShowBorders(true)
.SearchPanel(p => p.Visible(true))
.Paging(p => p.PageSize(15))
.Pager(p => p.Visible(true))
.Columns(columns => {
columns.AddFor(m => m.NameEn);
columns.AddFor(m => m.CapitalEn);
columns.AddFor(m => m.Population)
.Format(f => f.Type(Format.FixedPoint).Precision(0));
columns.AddFor(m => m.Area)
.Format(f => f.Type(Format.FixedPoint).Precision(0))
.HeaderCellTemplate(@<text>
<div>Area (km<sup>2</sup>)</div>
</text>);
columns.AddFor(m => m.Accession)
.Visible(false);
})
)
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Language:</span>
@(Html.DevExtreme().SelectBox()
.ID("select-language")
.InputAttr("aria-label", "Language")
.DataSource(new[] { "Arabic (Right-to-Left direction)", "English (Left-to-Right direction)" })
.Value("English (Left-to-Right direction)")
.Width(250)
.OnValueChanged("selectBox_valueChanged")
)
</div>
</div>
<script>
var arabicColumns = [{
dataField: "NameAr",
caption: "الدولة"
}, {
dataField: "CapitalAr",
caption: "عاصمة"
}, {
dataField: "Population",
format: {
type: "fixedPoint",
precision: 0
},
caption: "عدد السكان (نسمة) 2013"
}, {
dataField: "Area",
format: {
type: "fixedPoint",
precision: 0
},
headerCellTemplate: function(container) {
container.append($("<div>المساحة (كم<sup>2</sup>)</div>"));
}
}, {
dataField: "Accession",
visible: false
}],
englishColumns = [{
dataField: "NameEn",
caption: "Name"
}, {
dataField: "CapitalEn",
caption: "Capital"
}, {
dataField: "Population",
format: {
type: "fixedPoint",
precision: 0
},
}, {
dataField: "Area",
format: {
type: "fixedPoint",
precision: 0
},
headerCellTemplate: function(container) {
container.append($("<div>Area (km<sup>2</sup>)</div>"));
}
}, {
dataField: "Accession",
visible: false
}];
function selectBox_valueChanged(data) {
var isRTL = data.value === "Arabic (Right-to-Left direction)",
dataGrid = $("#gridContainer").dxDataGrid("instance");
dataGrid.option("rtlEnabled", isRTL);
dataGrid.option("columns", (isRTL) ? arabicColumns : englishColumns);
dataGrid.option("searchPanel.placeholder", (isRTL) ? "بحث" : "Search...");
}
</script>
using DevExtreme.MVC.Demos.Models;
using DevExtreme.MVC.Demos.Models.DataGrid;
using DevExtreme.MVC.Demos.Models.SampleData;
using System;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class DataGridController : Controller {
public ActionResult RightToLeftSupport() {
return View(SampleData.EuropeanCountries);
}
}
}
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.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.Demos.Models {
public class EuropeanCountry {
public string NameAr { get; set; }
[Display(Name = "Name")]
public string NameEn { get; set; }
public int Population { get; set; }
public double Area { get; set; }
[Display(Name = "Capital")]
public string CapitalEn { get; set; }
public string CapitalAr { get; set; }
public int Accession { get; set; }
}
}
#gridContainer {
height: 440px;
}
#gridContainer sup {
font-size: 0.8em;
vertical-align: super;
line-height: 0;
}
.options {
padding: 20px;
margin-top: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}
.option > span {
margin-right: 10px;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}