Your search did not match any results.

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.

You can use the editors on the right to modify the following properties:

  • labelLocation
    Specifies whether to display labels above or to the left of corresponding editors.

  • 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.

@model DevExtreme.NETCore.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.NETCore.Demos.Models.SampleData; using DevExtreme.NETCore.Demos.ViewModels; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class FormController : Controller { public ActionResult Overview() { return View(SampleData.Companies.First()); } [HttpGet] public object GetCompanies(DataSourceLoadOptions loadOptions) { return DataSourceLoader.Load(SampleData.Companies, loadOptions); } } }
using System.Collections.Generic; namespace DevExtreme.NETCore.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; namespace DevExtreme.NETCore.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; }