Free Trial Buy
    Your search did not match any results.
    Editors

    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 property 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 property that applies the styling mode to all the editors on the page.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Copy to CodePen
    Apply
    Reset
    $(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/21.1.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/21.1.4/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; }