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.
Copy to Codepen
Apply
Reset
window.onload = function() { 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: "arabicTemplate" }, { 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: "englishTemplate" }, { dataField: "Accession", visible: false }], languages = ["Arabic (Right-to-Left direction)", "English (Left-to-Right direction)"]; var rtlEnabledValue = ko.observable(false), columns = ko.observableArray(englishColumns), searchPanelPlaceholder = ko.observable("Search..."); var viewModel = { dataGridOptions: { dataSource: europeanUnion, rtlEnabled: rtlEnabledValue, searchPanel: { visible: true, placeholder: searchPanelPlaceholder }, paging: { pageSize: 15 }, columns: columns }, selectLanguageOptions: { items: languages, value: languages[1], width: 250, onValueChanged: function(data) { var isRTL = data.value === languages[0]; rtlEnabledValue(isRTL); columns((isRTL) ? arabicColumns : englishColumns); searchPanelPlaceholder((isRTL) ? "بحث" : "Search..." ); } } }; ko.applyBindings(viewModel, document.getElementById("data-grid-demo")); };
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="js/jquery-3.1.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.5/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="data-grid-demo"> <div id="gridContainer" data-bind="dxDataGrid: dataGridOptions"> <div data-options="dxTemplate:{ name:'arabicTemplate' }"> <div>المساحة (كم<sup>2</sup>)</div> </div> <div data-options="dxTemplate:{ name:'englishTemplate' }"> <div>Area (km<sup>2</sup>)</div> </div> </div> <div class="options-text">Language:</div> <div id="select-language" data-bind="dxSelectBox: selectLanguageOptions"></div> </div> </div> </body> </html>
#gridContainer { width: 100%; 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; }
var europeanUnion = [{ nameAr: "النمسا", nameEn: "Austria", population: 8451900, area: 83855, capitalAr: "فيينا", capitalEn: "Vienna", Accession: 1995 }, { nameAr: "بلجيكا", nameEn: "Belgium", population: 11161600, area: 30528, capitalAr: "بروكسل", capitalEn: "Brussels", Accession: 1957 }, { nameAr: "بلغاريا", nameEn: "Bulgaria", population: 7284600, area: 110994, capitalAr: "صوفيا", capitalEn: "Sofia", Accession: 2007 }, { nameAr: "كرواتيا", nameEn: "Croatia", population: 4262100, area: 56594, capitalAr: "زغرب", capitalEn: "Zagreb", Accession: 2013 }, { nameAr: "قبرص", nameEn: "Cyprus", population: 865900, area: 9251, capitalAr: "نيقوسيا", capitalEn: "Nicosia", Accession: 2004 }, { nameAr: "الجمهورية التشيكية", nameEn: "Czech Republic", population: 10516100, area: 78866, capitalAr: "براغ", capitalEn: "Prague", Accession: 2004 }, { nameAr: "الدنمارك", nameEn: "Denmark", population: 5602600, area: 43075, capitalAr: "كوبنهاغن", capitalEn: "Copenhagen", Accession: 1973 }, { nameAr: "استونيا", nameEn: "Estonia", population: 1324800, area: 45227, capitalAr: "تالين", capitalEn: "Tallinn", Accession: 2004 }, { nameAr: "فنلندا", nameEn: "Finland", population: 5426700, area: 338424, capitalAr: "هلسنكي", capitalEn: "Helsinki", Accession: 1995 }, { nameAr: "فرنسا", nameEn: "France", population: 65633200, area: 674843, capitalAr: "باريس", capitalEn: "Paris", Accession: 1957 }, { nameAr: "ألمانيا", nameEn: "Germany", population: 80523700, area: 357021, capitalAr: "البرلينية", capitalEn: "Berlin", Accession: 1957 }, { nameAr: "يونان", nameEn: "Greece", population: 11062500, area: 131990, capitalAr: "أثينا", capitalEn: "Athens", Accession: 1981 }, { nameAr: "هنغاريا", nameEn: "Hungary", population: 9908800, area: 93030, capitalAr: "بودابست", capitalEn: "Budapest", Accession: 2004 }, { nameAr: "أيرلندا", nameEn: "Ireland", population: 4591100, area: 70273, capitalAr: "دبلن", capitalEn: "Dublin", Accession: 1973 }, { nameAr: "إيطاليا", nameEn: "Italy", population: 59685200, area: 301338, capitalAr: "روما", capitalEn: "Rome", Accession: 1957 }, { nameAr: "لاتفيا", nameEn: "Latvia", population: 2023800, area: 64589, capitalAr: "ريغا", capitalEn: "Riga", Accession: 2004 }, { nameAr: "ليتوانيا", nameEn: "Lithuania", population: 2971900, area: 65200, capitalAr: "فيلنيوس", capitalEn: "Vilnius", Accession: 2004 }, { nameAr: "لوكسمبورغ", nameEn: "Luxembourg", population: 537000, area: 2586.4, capitalAr: "لوكسمبورغ", capitalEn: "Luxembourg", Accession: 1957 }, { nameAr: "مالطا", nameEn: "Malta", population: 421400, area: 316, capitalAr: "فاليتا", capitalEn: "Valletta", Accession: 2004 }, { nameAr: "هولندا", nameEn: "Netherlands", population: 16779600, area: 41543, capitalAr: "أمستردام", capitalEn: "Amsterdam", Accession: 1957 }, { nameAr: "بولندا", nameEn: "Poland", population: 38533300, area: 312685, capitalAr: "وارسو", capitalEn: "Warsaw", Accession: 2004 }, { nameAr: "البرتغال", nameEn: "Portugal", population: 10487300, area: 92390, capitalAr: "لشبونة", capitalEn: "Lisbon", Accession: 1986 }, { nameAr: "رومانيا", nameEn: "Romania", population: 20057500, area: "238391", capitalAr: "بوخارست", capitalEn: "Bucharest", Accession: 2007 }, { nameAr: "سلوفاكيا", nameEn: "Slovakia", population: 5410800, area: 49035, capitalAr: "براتيسلافا", capitalEn: "Bratislava", Accession: 2004 }, { nameAr: "سلوفينيا", nameEn: "Slovenia", population: 2058800, area: 20273, capitalAr: "ليوبليانا", capitalEn: "Ljubljana", Accession: 2004 }, { nameAr: "إسبانيا", nameEn: "Spain", population: 46704300, area: 504030, capitalAr: "مدريد", capitalEn: "Madrid", Accession: 1986 }, { nameAr: "السويد", nameEn: "Sweden", population: 9555900, area: 449964, capitalAr: "ستوكهولم", capitalEn: "Stockholm", Accession: 1995 }, { nameAr: "المملكة المتحدة", nameEn: "United Kingdom", population: 63730100, area: 243610, capitalAr: "لندن", capitalEn: "London", Accession: 1973 }];