Overview
Documentation
The Form widget allows you to visually represent and edit data stored in an object. The widget 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 option. With the Form widget, you can specify the location of labels against corresponding editors and number of columns used in the form layout. Optionally, the widget can determine the column count based on current form width (adaptive rendering).
jQuery
AngularJS
Angular
ASP.NET MVC
ASP.NET Core
@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 string[] { "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 int[] { 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;
using DevExtreme.MVC.Demos.Models.DataGrid;
using DevExtreme.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;
using Newtonsoft.Json;
using System;
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 List<Company> Companies = new List<Company> {
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;
namespace DevExtreme.MVC.Demos.ViewModels {
public class FormViewModel {
public int ID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string CompanyName { get; set; }
public string Position { get; set; }
public string OfficeNo { get; set; }
public DateTime BirthDate { get; set; }
public DateTime HireDate { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string State { get; set; }
public string Zipcode { get; set; }
public string Phone { get; set; }
public string Email { get; set; }
public string Skype { get; set; }
public string Notes { 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;
}