$(() => {
const stylingMode = readStylingMode() || 'filled';
DevExpress.config({
editorStylingMode: stylingMode,
});
const name = $('#name').dxTextBox({
value: 'Olivia Peyton',
width: '100%',
placeholder: 'Type...',
label: 'Name',
}).dxValidator({
validationRules: [{
type: 'required',
}],
}).dxTextBox('instance');
const place = $('#address').dxTextBox({
width: '100%',
placeholder: 'Type...',
label: 'Address',
}).dxValidator({
validationRules: [{
type: 'required',
}],
}).dxTextBox('instance');
const birthDate = $('#birthDate').dxDateBox({
width: '100%',
label: 'Birth Date',
placeholder: 'Select...',
value: '6/3/1981',
}).dxValidator({
validationRules: [{
type: 'required',
}],
}).dxDateBox('instance');
const hireDate = $('#hireDate').dxDateBox({
width: '100%',
label: 'Hire Date',
placeholder: 'Select...',
}).dxValidator({
validationRules: [{
type: 'required',
}],
}).dxDateBox('instance');
const state = $('#state').dxSelectBox({
items: states,
width: '100%',
placeholder: 'Select...',
label: 'State',
}).dxValidator({
validationRules: [{
type: 'required',
}],
}).dxSelectBox('instance');
const position = $('#position').dxTagBox({
items: positions,
value: ['Support Manager'],
placeholder: 'Select...',
multiline: false,
width: '100%',
label: 'Position',
}).dxValidator({
validationRules: [{
type: 'required',
}],
}).dxTagBox('instance');
const phone = $('#phone').dxTextBox({
width: '100%',
label: 'Phone',
mask: '+1 (000) 000-0000',
maskRules: {
X: /[02-9]/,
},
}).dxValidator({
validationRules: [{
type: 'required',
}],
}).dxTextBox('instance');
const notes = $('#notes').dxTextArea({
value: 'Olivia loves to sell. She has been selling DevAV products since 2012.',
width: '100%',
placeholder: 'Type...',
label: 'Notes',
}).dxTextArea('instance');
$('#validate').dxButton({
text: 'Save',
type: 'default',
onClick(e) {
const result = e.validationGroup.validate();
if (result.isValid) {
DevExpress.ui.notify('The task was saved successfully.', 'success');
} else {
DevExpress.ui.notify('The task was not saved. Please check if all fields are valid.', 'error');
}
},
});
$('#modeSelector').dxSelectBox({
items: ['outlined', 'filled', 'underlined'],
value: stylingMode,
onValueChanged(e) {
writeStylingMode(e.value);
},
});
$('#labelModeSelector').dxSelectBox({
items: ['static', 'floating', 'hidden'],
value: 'static',
onValueChanged(e) {
[name, place, birthDate, position, hireDate, state, phone, notes].forEach((editor) => {
editor.option('labelMode', e.value);
});
},
});
});
const storageKey = 'editorStylingMode';
function readStylingMode() {
const mode = localStorage.getItem(storageKey);
localStorage.removeItem(storageKey);
return mode;
}
function writeStylingMode(mode) {
localStorage.setItem(storageKey, mode);
window.location.reload(true);
}
<!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/22.2.6/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/22.2.6/js/dx.all.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
<script src="data.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div class="title">Edit Profile</div>
<div class="editors">
<div class="editors-container">
<div class="left">
<div id="name"></div>
<div id="address"></div>
</div>
<div class="right">
<div id="birthDate"></div>
<div id="state"></div>
</div>
</div>
<div class="center">
<div id="position"></div>
</div>
<div class="editors-container">
<div class="left">
<div id="phone"></div>
</div>
<div class="right">
<div id="hireDate"></div>
</div>
</div>
<div class="center">
<div id="notes"></div>
</div>
<div class="center">
<div id="validate" class="validate"></div>
</div>
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<label>Styling Mode</label>
<div id="modeSelector"></div>
</div>
<div class="option">
<label>Label Mode</label>
<div id="labelModeSelector"></div>
</div>
</div>
</div>
</body>
</html>
.title {
padding: 20px 0 20px 0;
font-size: 18px;
font-weight: 500;
}
.editors {
margin-right: 320px;
height: 570px;
}
.editors .left {
padding: 0 10px 0 0;
}
.editors .right {
padding: 0 0 0 10px;
}
.editors .left,
.editors .right {
flex-grow: 1;
}
.editors .left > div,
.editors .right > div,
.editors .center > div {
margin-bottom: 20px;
}
.editors .center {
padding: 0 27px 0 0;
}
.validate {
float: right;
}
.options {
padding: 20px;
position: absolute;
bottom: 0;
right: 0;
width: 260px;
top: 0;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 20px;
}
.editors-container {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 27px;
}
const positions = [
'HR Manager',
'IT Manager',
'CEO',
'Controller',
'Sales Manager',
'Support Manager',
'Shipping Manager',
];
const states = ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'];