Your search did not match any results.
Field Set

Field Set

Documentation

DevExtreme comes with the «dx-fieldset» CSS class that defines the appearance of an element displaying a list of field-value pairs. Each fieldset item is displayed within a separate field element, which has the «dx-field» class. The field element may include label and value elements defined by the «dx-field-label» and «dx-field-value» classes, respectively.

<div class="form"> <div class="dx-fieldset"> <div class="dx-fieldset-header">Simple Field Set</div> <div class="dx-field"> <div class="dx-field-label">Full Name</div> <div class="dx-field-value-static">Kevin Carter</div> </div> <div class="dx-field"> <div class="dx-field-label">Position</div> <div class="dx-field-value-static">Shipping Manager</div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">Field Set with DevExtreme Widgets</div> <div class="dx-field"> <div class="dx-field-label">Address</div> <div class="dx-field-value"> @(Html.DevExtreme().TextBox() .Value("424 N Main St.")) </div> </div> <div class="dx-field"> <div class="dx-field-label">City</div> <div class="dx-field-value"> @(Html.DevExtreme().TextBox() .Value("San Diego")) </div> </div> </div> <div class="dx-fieldset" id="notes-container"> <div class="dx-fieldset-header">Field Set with Custom Value Width</div> <div class="dx-field"> <div class="dx-field-label">Notes</div> <div class="dx-field-value"> @(Html.DevExtreme().TextArea() .Height(80) .Value("Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months. When not in the office, he is usually on the basketball court playing pick-up games.")) </div> </div> </div> </div>
using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class FieldSetController : Controller { public ActionResult Overview() { return View(); } } }
.dx-fieldset:first-child > h4:first-child { margin-top: 0; } #notes-container > .dx-field > .dx-field-label { width: 20%; } #notes-container > .dx-field > .dx-field-value { width: 80%; }