Form - Grouped Fields

You can organize Form items in groups and tabs. To do this, declare Group and Tabbed items in the items[] array. Each group and tab can have their own layout and contain other item types.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

@using DevExtreme.MVC.Demos.ViewModels @model FormViewModel <div class="long-title"><h3>Personal details</h3></div> <div id="form-container"> @(Html.DevExtreme().Form<FormViewModel>() .ID("form") .ColCount(2) .Items(items => { items.AddGroup() .Caption("System Information") .CaptionTemplate(new JS("function(data) { return groupCaptionTemplate('info', data); }")) .Items(groupItems => { groupItems.AddSimpleFor(m => m.ID).IsRequired(false); groupItems.AddGroup() .Caption("Main Information") .CaptionTemplate(new JS("function(data) { return groupCaptionTemplate('user', data); }")) .Items(innerGroupItems => { groupItems.AddSimpleFor(m => m.FirstName); groupItems.AddSimpleFor(m => m.LastName); groupItems.AddSimpleFor(m => m.HireDate).IsRequired(false); groupItems.AddSimpleFor(m => m.Position); groupItems.AddSimpleFor(m => m.OfficeNo); }); }); items.AddGroup() .Caption("Personal Data") .CaptionTemplate(new JS("function(data) { return groupCaptionTemplate('card', data); }")) .Items(groupItems => { groupItems.AddSimpleFor(m => m.BirthDate) .IsRequired(false); groupItems.AddGroup() .Caption("Home Address") .CaptionTemplate(new JS("function(data) { return groupCaptionTemplate('home', data); }")) .Items(innerGroupItems => { innerGroupItems.AddSimpleFor(m => m.Address); innerGroupItems.AddSimpleFor(m => m.City); innerGroupItems.AddSimpleFor(m => m.State); innerGroupItems.AddSimpleFor(m => m.Zipcode); }); }); items.AddGroup() .Caption("Contact Information") .CaptionTemplate(new JS("function(data) { return groupCaptionTemplate('tel', data); }")) .Items(groupItems => { groupItems.AddTabbed() .TabPanelOptions(o => { o.DeferRendering(false); }) .Tabs(tabItems => { tabItems.Add() .Title("Phone") .Items(tabItem => tabItem.AddSimpleFor(m => m.Phone)); tabItems.Add() .Title("Skype") .Items(tabItem => tabItem.AddSimpleFor(m => m.Skype)); tabItems.Add() .Title("Email") .Items(tabItem => tabItem.AddSimpleFor(m => m.Email)); }); }); }) .FormData(Model) ) </div> <script> function groupCaptionTemplate(icon, data) { return `<i class='dx-icon dx-icon-${icon}'></i><span>${data.caption}</span>`; } </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 GroupedFields() { return View(new FormViewModel { ID = 1, FirstName = "John", LastName = "Heart", Position = "CEO", OfficeNo = "901", BirthDate = new DateTime(1964, 3, 16), HireDate = new DateTime(1995, 1, 15), Address = "351 S Hill St.", City = "Los Angeles", State = "CA", Zipcode = "90013", Phone = "+1(213) 555-9392", Email = "jheart@dx-email.com", Skype = "jheart_DX_skype" }); } } }

#form-container { margin: 10px; } .long-title h3 { font-size: 24px; text-align: center; line-height: 2em; } .dx-form-group-custom-caption .dx-icon { color: var(--dx-color-spin-icon); } .dx-form-group-custom-caption span { line-height: 1; }

To create a group item, assign "group" to the itemType property. To specify a group's title, use the caption property. To replace a group's title with custom content, implement a caption template. This demo shows three groups. The Personal Data group is nested in the System Information group.

To create a tabbed item, assign "tabbed" to the itemType property. This demo shows a tabbed item nested in the Contact Information group. The Form uses the TabPanel component to display tabs. You can specify the TabPanel's properties in the tabPanelOptions object. This demo disables the deferRendering property to render TabPanel's content immediately.