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 checkBoxWidget = $('#checkbox').dxCheckBox({
value: true,
text: 'text',
}).dxCheckBox('instance');
const switchWidget = $('#switch').dxSwitch({}).dxSwitch('instance');
const textBoxWidget = $('#text-box').dxTextBox({
showClearButton: true,
value: 'text',
}).dxTextBox('instance');
const numberBoxWidget = $('#number-box').dxNumberBox({
showSpinButtons: true,
value: '123',
}).dxNumberBox('instance');
const selectBoxWidget = $('#select-box').dxSelectBox({
items: europeanUnion,
value: europeanUnion[0].id,
displayExpr: 'nameEn',
valueExpr: 'id',
}).dxSelectBox('instance');
const tagBoxWidget = $('#tag-box').dxTagBox({
items: europeanUnion,
value: [europeanUnion[0].id],
placeholder: '...',
displayExpr: 'nameEn',
valueExpr: 'id',
}).dxTagBox('instance');
const textAreaWidget = $('#text-area').dxTextArea({
value: 'text',
}).dxTextArea('instance');
const autocompleteWidget = $('#autocomplete').dxAutocomplete({
items: europeanUnion,
valueExpr: 'nameEn',
}).dxAutocomplete('instance');
const languages = ['Arabic: Right-to-Left direction', 'English: Left-to-Right direction'];
$('#select-language').dxSelectBox({
items: languages,
value: languages[1],
onValueChanged(data) {
const rtl = data.value === languages[0];
const text = rtl ? 'نص' : 'text';
const expression = rtl ? 'nameAr' : 'nameEn';
$('#form').toggleClass('dx-rtl', rtl);
checkBoxWidget.option({
text,
rtlEnabled: rtl,
});
textBoxWidget.option({
value: text,
rtlEnabled: rtl,
});
textAreaWidget.option({
value: text,
rtlEnabled: rtl,
});
selectBoxWidget.option({
displayExpr: expression,
rtlEnabled: rtl,
});
tagBoxWidget.option({
displayExpr: expression,
rtlEnabled: rtl,
});
autocompleteWidget.option({
value: '',
rtlEnabled: rtl,
});
autocompleteWidget.option({
valueExpr: expression,
rtlEnabled: rtl,
});
numberBoxWidget.option('rtlEnabled', rtl);
switchWidget.option('rtlEnabled', rtl);
},
});
});
<!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://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">
<div id="form">
<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 id="select-language"></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 id="text-box"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Number Box</div>
<div class="dx-field-value">
<div id="number-box"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Select Box</div>
<div class="dx-field-value">
<div id="select-box"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Tag Box</div>
<div class="dx-field-value">
<div id="tag-box"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Text Area</div>
<div class="dx-field-value">
<div id="text-area"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Autocomplete</div>
<div class="dx-field-value">
<div id="autocomplete"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Check Box</div>
<div class="dx-field-value">
<div id="checkbox"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Switch</div>
<div class="dx-field-value">
<div id="switch"></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',
}];