<div class="options">
<div class="caption">Options</div>
<div class="editors-modes">
<div class="option">
<label>Styling Mode</label>
@(Html.DevExtreme().SelectBox()
.ID("styling-mode-selector")
.Items(new[] { "outlined", "filled", "underlined" })
.Value(new JS("stylingMode"))
.InputAttr("aria-label", "Styling Mode")
.OnValueChanged("getValueChangedHandler('stylingMode')")
)
</div>
<div class="option">
<label>Label Mode</label>
@(Html.DevExtreme().SelectBox()
.ID("label-mode-selector")
.Items(new[] { "static", "floating", "hidden" })
.Value(new JS("labelMode"))
.InputAttr("aria-label", "Label Mode")
.OnValueChanged("getValueChangedHandler('labelMode')")
)
</div>
</div>
</div>
<div class="widgets-container">
<div class="title">Edit Profile</div>
@(Html.DevExtreme().TextBox()
.ID("name")
.Value("Olivia Peyton")
.InputAttr("aria-label", "Name")
.Placeholder("Type...")
.Label("Name")
)
@(Html.DevExtreme().TextBox()
.ID("address")
.InputAttr("aria-label", "Address")
.Placeholder("Type...")
.Label("Address")
.LabelMode(EditorLabelMode.Static)
)
@(Html.DevExtreme().DateBox()
.ID("birth-date")
.InputAttr("aria-label", "Birth Date")
.Value(new DateTime(1981, 6, 3))
.Placeholder("Select...")
.Label("Birth Date")
)
@(Html.DevExtreme().SelectBox()
.ID("state")
.Items(new[] {
"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"
})
.InputAttr("aria-label", "State")
.Placeholder("Select...")
.Label("State")
.LabelMode(EditorLabelMode.Static)
)
@(Html.DevExtreme().TextBox()
.ID("phone")
.InputAttr("aria-label", "Phone")
.Label("Phone")
.Mask("+1 (X00) 000-0000")
.MaskRules(new { X = new JS("/[02-9]/") })
)
@(Html.DevExtreme().DateBox()
.ID("hire-date")
.InputAttr("aria-label", "Hire Date")
.Placeholder("Select...")
.Label("Hire Date")
.LabelMode(EditorLabelMode.Static)
)
@(Html.DevExtreme().DateRangeBox()
.ID("vacation-dates")
.StartDate("6/3/2023")
.StartDateLabel("Start Vacation Date")
.EndDate("12/3/2023")
.EndDateLabel("End Vacation Date")
)
@(Html.DevExtreme().TextArea()
.ID("notes")
.Value("Olivia loves to sell. She has been selling DevAV products since 2012.")
.Placeholder("Type...")
.Label("Notes")
)
</div>
@(Html.DevExtreme().Button()
.ID("validate")
.Text("Save")
.Icon("save")
.Type(ButtonType.Default)
.OnClick("saveClick")
)
<script>
var stylingMode = "outlined";
var labelMode = "static";
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 getWidgetsInstances() {
const name = $("#name").dxTextBox("instance");
const address = $("#address").dxTextBox("instance");
const phone = $("#phone").dxTextBox("instance");
const birthDate = $("#birth-date").dxDateBox("instance");
const hireDate = $("#hire-date").dxDateBox("instance");
const vacationDates = $("#vacation-dates").dxDateRangeBox("instance");
const state = $("#state").dxSelectBox("instance");
const notes = $("#notes").dxTextArea("instance");
return [name, address, birthDate, hireDate, vacationDates, state, phone, notes];
}
const getValueChangedHandler = (optionName) => ({ value }) => {
getWidgetsInstances().forEach((editor) => {
editor.option(optionName, value);
});
};
$(function() {
["name", "address", "birth-date", "hire-date", "state", "phone"].forEach((editorId) => {
$("#" + editorId).dxValidator({
validationRules: [{ type: "required" }]
});
});
});
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models;
using DevExtreme.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DevExtreme.MVC.Demos.Models.DataGrid;
namespace DevExtreme.MVC.Demos.Controllers {
public class CommonController : Controller {
public ActionResult EditorAppearanceVariants() {
return View();
}
}
}
.demo-container {
height: 680px;
}
.widgets-container {
display: grid;
grid-template-areas:
'title title title title'
'name name birthDate birthDate '
'address address state phone'
'hireDate hireDate range range'
'notes notes notes notes';
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
padding-left: 20px;
padding-right: 20px;
}
.title {
grid-area: title;
font-size: 18px;
font-weight: 500;
}
#name {
grid-area: name;
}
#address {
grid-area: address;
}
#birth-date {
grid-area: birthDate;
}
#state {
grid-area: state;
}
#phone {
grid-area: phone;
}
#hire-date {
grid-area: hireDate;
}
#notes {
grid-area: notes;
}
#vacation-dates {
grid-area: range;
}
#validate {
float: right;
margin-top: 20px;
margin-right: 20px;
width: 100px;
}
.options {
grid-area: options;
padding: 20px;
margin-bottom: 40px;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-size: 18px;
font-weight: 500;
}
.editors-modes {
display: flex;
}
.option {
padding-right: 20px;
margin-top: 20px;
}