Your search did not match any results.
Data Grid

Right-To-Left Support

Documentation

DevExtreme supports right-to-left layouts. To change a widget's layout to RTL, set the widget's rtlEnabled option to true. You can also set rtlEnabled to true in the project's globalConfig to apply RTL to all widgets in your application.

In this demo, you can use the drop-down menu to switch between the different layouts. Note that this demo updates the dataField and caption options to display translated content when you change the rtlEnabled value.

www.wikipedia.org
@using DevExtreme.NETCore.Demos.Models @model IEnumerable<EuropeanCountry> @(Html.DevExtreme().DataGrid<EuropeanCountry>() .ID("gridContainer") .DataSource(Model) .ShowBorders(true) .SearchPanel(p => p.Visible(true)) .Paging(p => p.PageSize(15)) .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") .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.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.DataGrid; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class DataGridController : Controller { public ActionResult RightToLeftSupport() { return View(SampleData.EuropeanCountries); } } }
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; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.Linq; namespace DevExtreme.NETCore.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; }