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.
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.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
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)"];
$scope.searchPanel = {
visible: true,
placeholder: "Search..."
};
$scope.columns = englishColumns;
$scope.rtlEnabledValue = false;
$scope.dataGridOptions = {
dataSource: europeanUnion,
showBorders: true,
paging: {
pageSize: 15
},
bindingOptions: {
searchPanel: "searchPanel",
rtlEnabled: "rtlEnabledValue",
columns: "columns"
}
};
$scope.selectLanguageOptions = {
items: languages,
value: languages[1],
width: 250,
onValueChanged: function(data) {
var isRTL = data.value === languages[0];
$scope.rtlEnabledValue = isRTL;
$scope.columns = (isRTL) ? arabicColumns : englishColumns;
$scope.searchPanel.placeholder = (isRTL) ? "بحث" : "Search...";
}
};
});
<!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="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.1.6/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" ng-app="DemoApp" ng-controller="DemoController">
<div id="gridContainer" dx-data-grid="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">
<div class="caption">Options</div>
<div class="option">
<span>Language:</span>
<div id="select-language" dx-select-box="selectLanguageOptions"></div>
</div>
</div>
</div>
</body>
</html>
#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;
}
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
}];