Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Overview
Documentation
The Form UI component allows you to visually represent and edit data stored in an object. The UI component binds each layout item to a specific field in an existing data object. To display a simple form, you can assign the required object to the formData property. With the Form UI component, you can specify the location of labels against corresponding editors and number of columns used in the form layout. Optionally, the component can determine the column count based on current form width (adaptive rendering).
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
@model DevExtreme.MVC.Demos.Models.Company
<div id="form-demo">
<div class="widget-container">
<div>Select company:</div>
@(Html.DevExtreme().SelectBox()
.DisplayExpr("Name")
.DataSource(d => d.Mvc().LoadAction("GetCompanies").Key("ID"))
.Value(1)
.OnValueChanged("selectBox_valueChanged")
)
@(Html.DevExtreme().Form()
.ID("form")
.ColCount(2)
.FormData(Model)
.LabelLocation(FormLabelLocation.Top)
.MinColWidth(300)
.ReadOnly(false)
.ShowColonAfterLabel(true)
)
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Label location:</span>
@(Html.DevExtreme().SelectBox()
.DataSource(new[] { "left", "top" })
.Value("top")
.OnValueChanged("labelLocation_changed")
)
</div>
<div class="option">
<span>Columns count:</span>
@(Html.DevExtreme().SelectBox()
.DataSource(new object[] { "auto", 1, 2, 3 })
.Value(2)
.OnValueChanged("colCount_changed")
)
</div>
<div class="option">
<span>Min column width:</span>
@(Html.DevExtreme().SelectBox()
.DataSource(new[] { 150, 200, 300 })
.Value(300)
.OnValueChanged("minColWidth_changed")
)
</div>
<div class="option">
<span>Form width:</span>
@(Html.DevExtreme().NumberBox()
.Value(null)
.Max(550)
.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 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.Companies.First());
}
[HttpGet]
public ActionResult GetCompanies(DataSourceLoadOptions loadOptions) {
return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(SampleData.Companies, loadOptions)), "application/json");
}
}
}
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<Company> Companies = new[] {
new Company {
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 = "http://www.nowebsitesupermart.com"
},
new Company {
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 = "http://www.nowebsitedepot.com"
},
new Company {
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 = "http://www.nowebsitemusic.com"
},
new Company {
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 = "http://www.nowebsitetomsclub.com"
}
};
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.Demos.Models {
public class Company {
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; }
}
}
.widget-container {
margin-right: 320px;
padding: 20px;
max-width: 550px;
min-width: 300px;
}
#form {
margin-top: 25px;
}
.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;
}