Right-to-Left Support
DevExtreme Data Editor JavaScript components fully support RTL languages. As is illustrated in this demo, Editor components are able to display their 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.
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.
const DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', ($scope) => {
const languages = [
'Arabic: Right-to-Left direction',
'English: Left-to-Right direction',
];
$scope.displayExpr = 'nameEn';
$scope.rtlEnabled = false;
$scope.textBoxValue = 'text';
$scope.textAreaValue = 'text';
$scope.checkBoxValue = 'text';
$scope.europeanUnion = europeanUnion;
$scope.checkBoxOptions = {
value: true,
bindingOptions: {
text: 'checkBoxValue',
rtlEnabled: 'rtlEnabled',
},
};
$scope.switchBoxOptions = {
bindingOptions: {
rtlEnabled: 'rtlEnabled',
},
};
$scope.textBoxOptions = {
showClearButton: true,
bindingOptions: {
text: 'textBoxValue',
rtlEnabled: 'rtlEnabled',
},
};
$scope.numberBoxOptions = {
showSpinButtons: true,
value: '123',
bindingOptions: {
rtlEnabled: 'rtlEnabled',
},
};
$scope.selectBoxOptions = {
items: europeanUnion,
value: europeanUnion[0],
bindingOptions: {
displayExpr: 'displayExpr',
rtlEnabled: 'rtlEnabled',
},
};
$scope.tagBoxOptions = {
items: europeanUnion,
value: [europeanUnion[0].id],
placeholder: '...',
valueExpr: 'id',
bindingOptions: {
displayExpr: 'displayExpr',
rtlEnabled: 'rtlEnabled',
},
};
$scope.textAreaOptions = {
bindingOptions: {
text: 'textAreaValue',
rtlEnabled: 'rtlEnabled',
},
};
$scope.autocompleteOptions = {
items: europeanUnion,
bindingOptions: {
valueExpr: 'displayExpr',
rtlEnabled: 'rtlEnabled',
},
};
$scope.selectLanguageOptions = {
items: languages,
value: languages[1],
bindingOptions: {
rtlEnabled: 'rtlEnabled',
},
onValueChanged(data) {
const rtl = data.value === languages[0];
const text = rtl ? 'نص' : 'text';
$scope.displayExpr = rtl ? 'nameAr' : 'nameEn';
$scope.rtlEnabled = rtl;
$scope.textBoxValue = text;
$scope.textAreaValue = text;
$scope.checkBoxValue = text;
},
};
});
<!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/21.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.4/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/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/21.2.4/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 ng-class="{ 'dx-rtl': rtlEnabled }">
<div class="options">
<div class="caption">Options</div>
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Language</div>
<div class="dx-field-value">
<div dx-select-box="selectLanguageOptions"></div>
</div>
</div>
</div>
</div>
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Text Box</div>
<div class="dx-field-value">
<div dx-text-box="textBoxOptions"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Number Box</div>
<div class="dx-field-value">
<div dx-number-box="numberBoxOptions"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Select Box</div>
<div class="dx-field-value">
<div dx-select-box="selectBoxOptions"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Tag Box</div>
<div class="dx-field-value">
<div dx-tag-box="tagBoxOptions"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Text Area</div>
<div class="dx-field-value">
<div dx-text-area="textAreaOptions"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Autocomplete</div>
<div class="dx-field-value">
<div dx-autocomplete="autocompleteOptions"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Check Box</div>
<div class="dx-field-value">
<div dx-check-box="checkBoxOptions"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Switch</div>
<div class="dx-field-value">
<div dx-switch="switchBoxOptions"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.options .dx-fieldset {
margin: 0;
}
.option {
margin-top: 10px;
}
.caption {
font-size: 18px;
font-weight: 500;
padding-right: 15px;
}
.option > span {
margin-right: 10px;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}
const europeanUnion = [{
id: 1,
nameAr: 'النمسا',
nameEn: 'Austria',
}, {
id: 2,
nameAr: 'بلجيكا',
nameEn: 'Belgium',
}, {
id: 3,
nameAr: 'بلغاريا',
nameEn: 'Bulgaria',
}, {
id: 4,
nameAr: 'كرواتيا',
nameEn: 'Croatia',
}, {
id: 5,
nameAr: 'قبرص',
nameEn: 'Cyprus',
}, {
id: 6,
nameAr: 'الجمهورية التشيكية',
nameEn: 'Czech Republic',
}, {
id: 7,
nameAr: 'الدنمارك',
nameEn: 'Denmark',
}, {
id: 8,
nameAr: 'استونيا',
nameEn: 'Estonia',
}, {
id: 9,
nameAr: 'فنلندا',
nameEn: 'Finland',
}, {
id: 10,
nameAr: 'فرنسا',
nameEn: 'France',
}, {
id: 11,
nameAr: 'ألمانيا',
nameEn: 'Germany',
}, {
id: 12,
nameAr: 'يونان',
nameEn: 'Greece',
}, {
id: 13,
nameAr: 'هنغاريا',
nameEn: 'Hungary',
}, {
id: 14,
nameAr: 'أيرلندا',
nameEn: 'Ireland',
}, {
id: 15,
nameAr: 'إيطاليا',
nameEn: 'Italy',
}, {
id: 16,
nameAr: 'لاتفيا',
nameEn: 'Latvia',
}, {
id: 17,
nameAr: 'ليتوانيا',
nameEn: 'Lithuania',
}, {
id: 18,
nameAr: 'لوكسمبورغ',
nameEn: 'Luxembourg',
}, {
id: 19,
nameAr: 'مالطا',
nameEn: 'Malta',
}, {
id: 20,
nameAr: 'هولندا',
nameEn: 'Netherlands',
}, {
id: 21,
nameAr: 'بولندا',
nameEn: 'Poland',
}, {
id: 22,
nameAr: 'البرتغال',
nameEn: 'Portugal',
}, {
id: 23,
nameAr: 'رومانيا',
nameEn: 'Romania',
}, {
id: 24,
nameAr: 'سلوفاكيا',
nameEn: 'Slovakia',
}, {
id: 25,
nameAr: 'سلوفينيا',
nameEn: 'Slovenia',
}, {
id: 26,
nameAr: 'إسبانيا',
nameEn: 'Spain',
}, {
id: 27,
nameAr: 'السويد',
nameEn: 'Sweden',
}, {
id: 28,
nameAr: 'المملكة المتحدة',
nameEn: 'United Kingdom',
}];