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.
<div class="title">Edit Task</div>
<div class="editors">
<div class="left">
@(Html.DevExtreme().TextBox()
.Value("Samantha Bright")
.Width("100%")
.Placeholder("Owner")
)
@(Html.DevExtreme().TextBox()
.ID("subject")
.Value("")
.Width("100%")
.Placeholder("Subject")
)
</div>
<div class="right">
@(Html.DevExtreme().DateBox()
.Value(new DateTime(2020, 5, 3))
.Width("100%")
.Placeholder("Start Date")
)
@(Html.DevExtreme().SelectBox()
.Items(new[] { "High", "Urgent", "Normal", "Low" })
.Value("High")
.Width("100%")
.Placeholder("Priority")
)
</div>
<div class="center">
@(Html.DevExtreme().TagBox()
.Items(new[] { "Not Started", "Need Assistance", "In Progress", "Deferred", "Completed" })
.Value(new[] { "Not Started" })
.Multiline(false)
.Width("100%")
.Placeholder("Status")
)
@(Html.DevExtreme().TextArea()
.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")
)
</div>
<div class="center">
@(Html.DevExtreme().Button()
.ElementAttr("class", "validate")
.Text("Save")
.Type(ButtonType.Default)
.OnClick("saveClick")
)
</div>
</div>
<div class="options">
<div class="caption">Styling Mode</div>
<div class="option">
@(Html.DevExtreme().SelectBox()
.Items(new[] { "outlined", "filled", "underlined" })
.Value(new JS("stylingMode"))
.OnValueChanged("stylingModeChanged")
)
</div>
</div>
<script>
var storageKey = "stylingMode";
var stylingMode = readStylingMode() || "filled";
DevExpress.config({
editorStylingMode: stylingMode
});
function saveClick(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");
}
}
function readStylingMode() {
var mode = localStorage.getItem(storageKey);
localStorage.removeItem(storageKey);
return mode;
}
function stylingModeChanged(e) {
localStorage.setItem(storageKey, e.value);
window.location.reload(true);
}
$(function() {
$("#subject").dxValidator({
validationRules: [{ type: "required" }]
});
DevExpress.validationEngine.validateGroup();
});
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using DevExtreme.AspNet.Mvc;
using Newtonsoft.Json;
using DevExtreme.AspNet.Data;
using DevExtreme.NETCore.Demos.Models;
using DevExtreme.NETCore.Demos.Models.SampleData;
using DevExtreme.NETCore.Demos.ViewModels;
using DevExtreme.NETCore.Demos.Models.DataGrid;
// For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
namespace DevExtreme.NETCore.Demos.Controllers {
public class CommonController : Controller {
public ActionResult StylingMode() {
return View();
}
}
}
.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;
}