$(function() {
var stylingMode = readStylingMode() || "filled";
DevExpress.config({
editorStylingMode: stylingMode
});
$("#owner").dxTextBox({
value: "Samantha Bright",
width: "100%",
placeholder: "Owner"
});
$("#subject").dxTextBox({
value: "",
width: "100%",
placeholder: "Subject"
}).dxValidator({
validationRules: [{
type: "required"
}]
});
$("#date").dxDateBox({
value: new Date(2020, 4, 3),
width: "100%",
placeholder: "Start Date"
});
$("#priority").dxSelectBox({
items: [ "High", "Urgent", "Normal", "Low" ],
value: "High",
width: "100%",
placeholder: "Priority"
});
$("#status").dxTagBox({
items: [ "Not Started", "Need Assistance", "In Progress", "Deferred", "Completed" ],
value: [ "Not Started" ],
multiline: false,
width: "100%",
placeholder: "Status"
});
$("#details").dxTextArea({
value: "Need sign-off on the new NDA agreement. It's important that this is done quickly to prevent any unauthorized leaks.",
width: "100%",
placeholder: "Details"
});
$("#validate").dxButton({
text: "Save",
type: "default",
onClick: function (e) {
var 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: function(e) {
writeStylingMode(e.value);
}
});
DevExpress.validationEngine.validateGroup();
});
var storageKey = "editorStylingMode";
function readStylingMode() {
var 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/20.2.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.6/js/dx.all.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 class="title">Edit Task</div>
<div class="editors">
<div class="left">
<div id="owner"></div>
<div id="subject"></div>
</div>
<div class="right">
<div id="date"></div>
<div id="priority"></div>
</div>
<div class="center">
<div id="status"></div>
<div id="details"></div>
</div>
<div class="center">
<div id="validate" class="validate"></div>
</div>
</div>
<div class="options">
<div class="caption">Styling Mode</div>
<div class="option">
<div id="modeSelector"></div>
</div>
</div>
</div>
</body>
</html>
.title {
padding: 20px 0 20px 0;
font-size: 18px;
font-weight: 500;
}
.editors {
margin-right: 320px;
}
.editors .left, .editors .right {
display: inline-block;
width: 49%;
padding-right: 20px;
box-sizing: border-box;
}
.editors .left > div, .editors .right > div, .editors .center > div {
margin-bottom: 20px;
}
.editors .center {
padding: 20px 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;
}