Your search did not match any results.

Form - Overview

The Form component builds a data entry UI for an object assigned to the formData property. The component displays and aligns label-editor pairs for each field in the bound object.

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.