Your search did not match any results.
Data Grid

Right-To-Left Support

Documentation
The DataGrid fully support RTL languages. As is illustrated in this demo, the DataGrid widget is able to display its 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 IEnumerable<DevExtreme.MVC.Demos.Models.EuropeanCountry> @(Html.DevExtreme().DataGrid() .ID("gridContainer") .DataSource(Model) .SearchPanel(p => p.Visible(true)) .Paging(p => p.PageSize(15)) .Columns(columns => { columns.Add() .DataField("NameEn") .Caption("Name"); columns.Add() .DataField("CapitalEn") .Caption("Capital"); columns.Add() .DataField("Population") .Format(f => f.Type(Format.FixedPoint).Precision(0)); columns.Add() .DataField("Area") .Format(f => f.Type(Format.FixedPoint).Precision(0)) .HeaderCellTemplate(@<text> <div>Area (km<sup>2</sup>)</div> </text>); columns.Add() .DataField("Accession") .Visible(false); }) ) <div class="options-text">Language:</div> @(Html.DevExtreme().SelectBox() .ID("select-language") .DataSource(new string[] { "Arabic (Right-to-Left direction)", "English (Left-to-Right direction)" }) .Value("English (Left-to-Right direction)") .Width(250) .OnValueChanged("selectBox_valueChanged") ) <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.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; 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.Models { public class EuropeanCountry { public string NameAr { get; set; } public string NameEn { get; set; } public int Population { get; set; } public double Area { get; set; } 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-text { line-height: 36px; padding-right: 5px; font-size: 14px; } #select-language, .options-text { display: inline-block; vertical-align: top; }