Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@model DevExtreme.MVC.Demos.Models.ActiveCompany
<div id="form-demo">
<div class="widget-container">
<div id="companySelectText">Select company:</div>
@(Html.DevExtreme().SelectBox()
.ID("companySelectBox")
.DisplayExpr("Name")
.InputAttr("aria-label", "Company")
.Label("Select company")
.LabelMode(EditorLabelMode.Floating)
.DataSource(d => d.Mvc().LoadAction("GetCompanies").Key("ID"))
.Value(1)
.OnValueChanged("selectBox_valueChanged")
)
@(Html.DevExtreme().Form()
.ID("form")
.ColCount(2)
.FormData(Model)
.LabelMode(FormLabelMode.Floating)
.LabelLocation(FormLabelLocation.Left)
.MinColWidth(300)
.ReadOnly(false)
.ShowColonAfterLabel(true)
)
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Label mode:</span>
@(Html.DevExtreme().SelectBox()
.InputAttr("aria-label", "Label Mode")
.DataSource(new[] { "outside", "static", "floating", "hidden" })
.Value("floating")
.OnValueChanged("labelMode_changed")
)
</div>
<div class="option">
<span>Label location:</span>
@(Html.DevExtreme().SelectBox()
.DataSource(new[] { "left", "top" })
.InputAttr("aria-label", "Label Location")
.Value("left")
.OnValueChanged("labelLocation_changed")
)
</div>
<div class="option">
<span>Columns count:</span>
@(Html.DevExtreme().SelectBox()
.DataSource(new object[] { "auto", 1, 2, 3 })
.Value(2)
.InputAttr("aria-label", "Column Count")
.OnValueChanged("colCount_changed")
)
</div>
<div class="option">
<span>Min column width:</span>
@(Html.DevExtreme().SelectBox()
.DataSource(new[] { 150, 200, 300 })
.Value(300)
.InputAttr("aria-label", "Min Column Width")
.OnValueChanged("minColWidth_changed")
)
</div>
<div class="option">
<span>Form width:</span>
@(Html.DevExtreme().NumberBox()
.Value(null)
.Max(550)
.InputAttr("aria-label", "Width")
.OnValueChanged("formWidth_changed")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("readOnly")
.Value(false)
.OnValueChanged("readOnly_changed")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("showColonAfterLabel")
.Value(true)
.OnValueChanged("showColonAfterLabel_changed")
)
</div>
</div>
</div>
<script>
function getFormInstance() {
return $("#form").dxForm("instance");
}
function selectBox_valueChanged(data) {
getFormInstance().option("formData", data.value);
}
function labelMode_changed(data) {
getFormInstance().option("labelMode", data.value);
const $companySelectText = $("#companySelectText");
const companySelectBox = $("#companySelectBox").dxSelectBox("instance");
if(data.value === "outside") {
companySelectBox.option("labelMode", "hidden");
$companySelectText.show();
} else {
companySelectBox.option("labelMode", data.value);
$companySelectText.hide();
}
}
function labelLocation_changed(data) {
getFormInstance().option("labelLocation", data.value);
}
function colCount_changed(data) {
getFormInstance().option("colCount", data.value);
}
function minColWidth_changed(data) {
getFormInstance().option("minColWidth", data.value);
}
function formWidth_changed(data) {
getFormInstance().option("width", data.value);
}
function readOnly_changed(data) {
getFormInstance().option("readOnly", data.value);
}
function showColonAfterLabel_changed(data) {
getFormInstance().option("showColonAfterLabel", data.value);
}
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
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.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class FormController : Controller {
public ActionResult Overview() {
return View(SampleData.ActiveCompanies.First());
}
[HttpGet]
public ActionResult GetCompanies(DataSourceLoadOptions loadOptions) {
return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(SampleData.ActiveCompanies, loadOptions)), "application/json");
}
}
}
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<ActiveCompany> ActiveCompanies = new[] {
new ActiveCompany() {
ID = 1,
Name = "Super Mart of the West",
Address = "702 SW 8th Street",
City = "Bentonville",
State = "Arkansas",
ZipCode = 72716,
Phone = "(800) 555-2797",
Fax = "(800) 555-2171",
Website = "",
Active = true
},
new ActiveCompany() {
ID = 2,
Name = "Electronics Depot",
Address = "2455 Paces Ferry Road NW",
City = "Atlanta",
State = "Georgia",
ZipCode = 30339,
Phone = "(800) 595-3232",
Fax = "(800) 595-3231",
Website = "",
Active = true
},
new ActiveCompany() {
ID = 3,
Name = "K&S Music",
Address = "1000 Nicllet Mall",
City = "Minneapolis",
State = "Minnesota",
ZipCode = 55403,
Phone = "(612) 304-6073",
Fax = "(612) 304-6074",
Website = "",
Active = true
},
new ActiveCompany() {
ID = 4,
Name = "Tom's Club",
Address = "999 Lake Drive",
City = "Issaquah",
State = "Washington",
ZipCode = 98027,
Phone = "(800) 955-2292",
Fax = "(800) 955-2293",
Website = "",
Active = true
}
};
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.Demos.Models {
public class ActiveCompany {
public int ID { get; set; }
public string Name { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string State { get; set; }
public int ZipCode { get; set; }
public string Phone { get; set; }
public string Fax { get; set; }
public string Website { get; set; }
public bool Active { get; set; }
}
}
.widget-container {
margin-right: 320px;
padding: 20px;
max-width: 550px;
min-width: 300px;
}
#form {
margin-top: 25px;
}
#companySelectText {
display: none;
}
.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: 10px;
}
You can use the editors on the right to modify the following properties:
-
labelMode: "outside" | "static" | "floating" | "hidden"
Specifies label display mode. -
labelLocation: "top" | "left" | "right"
Specifies whether to place outer labels above, to the left, or to the right of corresponding editors. The latter location is not demonstrated in this example. -
colCount
Specifies the number of columns in the layout. To build an adaptive layout where the column count depends on the container width, set this property's value to "auto". -
minColWidth
Specifies the minimum column width. Use this property when the colCount property's value is "auto". -
width
Specifies the Form component's width. -
readOnly
Makes the Form editors read-only. -
showColonAfterLabel
Specifies whether the Form displays a colon after a label.
To get started with the DevExtreme Form component, refer to the following tutorial for step-by-step instructions: Getting Started with Form.