Styling Mode
This example demonstrates editor styling modes. You can use the Styling Mode select box to change the mode.
Note that in frameworks that support property binding (Angular, AngularJS, Vue, and React), each editor’s stylingMode option is bound to a property you can change using the select box. In jQuery and ASP.NET MVC, the select box changes the global editorStylingMode option that applies the styling mode to all the editors on the page.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
$scope.date = new Date(2020, 4, 3);
$scope.validateClick = 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');
}
}
$scope.stylingMode = 'filled';
setTimeout(function() {
DevExpress.validationEngine.validateGroup($scope);
});
});
<!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.1.0/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/message.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/number.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/currency.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/date.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.light.css" />
<link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.android5.light.css" />
<link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.ios7.default.css" />
<link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.win10.black.css" />
<link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.win10.white.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/18.2.7/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" ng-app="DemoApp" ng-controller="DemoController">
<div class="title">Edit Task</div>
<div class="editors">
<div class="left">
<div dx-text-box="{
value: 'Samantha Bright',
width: '100%',
placeholder: 'Owner',
bindingOptions: { stylingMode: 'stylingMode' }
}"></div>
<div dx-text-box="{
value: '',
width: '100%',
placeholder: 'Subject',
bindingOptions: { stylingMode: 'stylingMode' }
}" dx-validator="{
validationRules: [{
type: 'required'
}]
}"></div>
</div>
<div class="right">
<div dx-date-box="{
value: date,
width: '100%',
placeholder: 'Start Date',
bindingOptions: { stylingMode: 'stylingMode' }
}"></div>
<div dx-select-box="{
items: [ 'High', 'Urgent', 'Normal', 'Low' ],
value: 'High',
width: '100%',
placeholder: 'Priority',
bindingOptions: { stylingMode: 'stylingMode' }
}"></div>
</div>
<div class="center">
<div dx-tag-box="{
items: [ 'Not Started', 'Need Assistance', 'In Progress', 'Deferred', 'Completed' ],
value: [ 'Not Started' ],
multiline: false,
width: '100%',
placeholder: 'Status',
bindingOptions: { stylingMode: 'stylingMode' }
}"></div>
<div dx-text-area="{
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',
bindingOptions: { stylingMode: 'stylingMode' }
}"></div>
</div>
<div class="center">
<div dx-button="{
text: 'Save',
type: 'default',
onClick: validateClick
}" class="validate"></div>
</div>
</div>
<div class="options">
<div class="caption">Styling Mode</div>
<div class="option">
<div dx-select-box="{
items: [ 'outlined', 'filled', 'underlined' ],
bindingOptions: { value: 'stylingMode' }
}"></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;
}