Fixed and Floating Number of Columns
The Form widget can have a fixed number of columns in the layout...
jQuery
$(function() { $("#formContainer").dxForm({ formData: { firstName: "John", lastName: "Heart", position: "CEO" }, colCount: 3 }); });
Angular
<dx-form [(formData)]="employee" [colCount]="3"> </dx-form>
import { DxFormModule } from "devextreme-angular"; // ... export class AppComponent { employee = { firstName: "John", lastName: "Heart", position: "CEO" } } @NgModule({ imports: [ // ... DxFormModule ], // ... })
... or it can vary the number of columns depending on the width of the container. To enable the latter mode, assign "auto" to the colCount option and specify the minimum column width using the minColWidth option. In this case, the maximum number of columns the layout can fit equals to floor(container_width / minColWidth)
. Note that groups and tabs can also have their own multi-column layouts inside.
jQuery
$(function() { $("#formContainer").dxForm({ formData: { firstName: "John", lastName: "Heart", hireDate: new Date(2012, 4, 13), city: "Los Angeles", phone: "+1(213) 555-9392", email: "jheart@dx-email.com" }, colCount: "auto", minColWidth: 500, items: ["firstName", "lastName", { itemType: "tabbed", tabs: [{ title: "Info", colCount: 3, items: ["position", "hireDate", "city" ] }, { title: "Contacts", colCount: 2, items: ["phone", "email"] }] }] }); });
Angular
<dx-form [(formData)]="employee" colCount="auto" [minColWidth]="500"> <dxi-item dataField="firstName"></dxi-item> <dxi-item dataField="lastName"></dxi-item> <dxi-item itemType="tabbed"> <dxi-tab title="Info" [colCount]="3" [items]="['position', 'hireDate', 'city' ]"> </dxi-tab> <dxi-tab title="Contacts" [colCount]="2" [items]="['phone', 'email']"> </dxi-tab> </dxi-item> </dx-form>
import { DxFormModule } from "devextreme-angular"; // ... export class AppComponent { employee = { firstName: "John", lastName: "Heart", hireDate: new Date(2012, 4, 13), city: "Los Angeles", phone: "+1(213) 555-9392", email: "jheart@dx-email.com" } } @NgModule({ imports: [ // ... DxFormModule ], // ... })
Span Columns
If an item should span more than one column, assign the required number to the colSpan option. Groups and tabs can also have individual colSpan values.
jQuery
$(function() { $("#formContainer").dxForm({ formData: { firstName: "John", lastName: "Heart", notes: "John has been in the Audio/Video industry since 1990.", phone: "+1(213) 555-9392", email: "jheart@dx-email.com" }, colCount: 2, items: ["firstName", "lastName", { dataField: "notes", colSpan: 2 }, { itemType: "tabbed", colSpan: 2, tabs: [{ title: "Contacts", items: ["phone", "email"] }] }] }); });
Angular
<dx-form [(formData)]="employee" [colCount]="2"> <dxi-item dataField="firstName"></dxi-item> <dxi-item dataField="lastName"></dxi-item> <dxi-item dataField="notes" [colSpan]="2"></dxi-item> <dxi-item itemType="tabbed" [colSpan]="2"> <dxi-tab title="Contacts" [items]="['phone', 'email']"> </dxi-tab> </dxi-item> </dx-form>
import { DxFormModule } from "devextreme-angular"; // ... export class AppComponent { employee = { firstName: "John", lastName: "Heart", notes: "John has been in the Audio/Video industry since 1990.", phone: "+1(213) 555-9392", email: "jheart@dx-email.com" } } @NgModule({ imports: [ // ... DxFormModule ], // ... })
Layout Depending on the Screen Width
The Form widget enables you to specify different layouts for different screen widths. For this purpose, use the screenByWidth function and colCountByScreen option. The screenByWidth function returns a size qualifier depending on the screen width. The colCountByScreen option establishes the dependency between the size qualifier and the column count.
jQuery
$(function() { $("#formContainer").dxForm({ formData: { firstName: "John", lastName: "Heart", position: "CEO", hireDate: new Date(2012, 4, 13) }, screenByWidth: function (width) { if (width < 768) return "xs"; if (width < 992) return "sm"; if (width < 1200) return "md"; return "lg"; }, colCountByScreen: { "xs": 1, "md": 3, "sm": 2, "lg": 4 } }); });
Angular
<dx-form [(formData)]="employee" [screenByWidth]="getSizeQualifier"> <dxo-col-count-by-screen [xs]="1" [sm]="2" [md]="3" [lg]="4"></dxo-col-count-by-screen> </dx-form>
import { DxFormModule } from "devextreme-angular"; // ... export class AppComponent { employee = { firstName: "John", lastName: "Heart", position: "CEO", hireDate: new Date(2012, 4, 13) } getSizeQualifier (width) { if (width < 768) return "xs"; if (width < 992) return "sm"; if (width < 1200) return "md"; return "lg"; } } @NgModule({ imports: [ // ... DxFormModule ], // ... })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.