Create a Tab
The Form widget allows you to organize items in tabs. In the context of the Form, tabs are called "tabbed items". A tabbed item can contain simple items, other tabs, groups or empty items. To create a tabbed item, assign "tabbed" to the itemType option. To specify the collection of tabs, use the tabs array. To define items displayed within an individual tab, use its items array.
jQuery
JavaScript
$(function() {
$("#formContainer").dxForm({
formData: {
name: "John Heart",
hireDate: new Date(2012, 4, 13),
city: "Los Angeles",
phone: "+1(213) 555-9392",
email: "jheart@dx-email.com"
},
items: ["name", {
itemType: "tabbed",
tabs: [{
title: "Info",
items: ["position", "hireDate", "city"]
}, {
title: "Contacts",
items: ["phone", "email"]
}]
}]
});
});Angular
HTML
TypeScript
<dx-form
[(formData)]="employee">
<dxi-item dataField="name"></dxi-item>
<dxi-item itemType="tabbed">
<dxi-tab title="Info">
<dxi-item dataField="position"></dxi-item>
<dxi-item dataField="hireDate"></dxi-item>
<dxi-item dataField="city"></dxi-item>
</dxi-tab>
<dxi-tab title="Contacts">
<dxi-item dataField="phone"></dxi-item>
<dxi-item dataField="email"></dxi-item>
</dxi-tab>
</dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
employee = {
name: "John Heart",
hireDate: new Date(2012, 4, 13),
city: "Los Angeles",
phone: "+1(213) 555-9392",
email: "jheart@dx-email.com"
}
}
@NgModule({
imports: [
// ...
DxFormModule
],
// ...
})Columns within a Tab
The content of a tab can be organized in columns. The colCount option instructs the tab about how many columns it must have. Note that the entire Form layout can also be organized in columns if the colCount option is declared on the root level. In this case, use the colSpan option to define how many general columns the tab must span.
jQuery
JavaScript
$(function() {
$("#formContainer").dxForm({
formData: {
name: "John Heart",
hireDate: new Date(2012, 4, 13),
city: "Los Angeles",
phone: "+1(213) 555-9392",
email: "jheart@dx-email.com"
},
// Splits the Form layout in two columns
colCount: 2,
items: ["name", {
itemType: "tabbed",
colSpan: 2,
tabs: [{
title: "Info",
// Makes this tab span both general columns
colSpan: 2,
// Organizes items inside this tab in three columns
colCount: 3,
items: ["position", "hireDate", "city"]
}, {
title: "Contacts",
colCount: 2,
items: ["phone", "email"]
}]
}]
});
});Angular
HTML
TypeScript
<dx-form
[(formData)]="employee"
[colCount]="2"> <!-- Splits the Form layout in two columns -->
<dxi-item dataField="name"></dxi-item>
<dxi-item itemType="tabbed" [colSpan]="2">
<dxi-tab
title="Info"
[colSpan]="2" <!-- Makes this tab span both general columns -->
[colCount]="3"> <!-- Organizes items inside this tab in three columns -->
<dxi-item dataField="position"></dxi-item>
<dxi-item dataField="hireDate"></dxi-item>
<dxi-item dataField="city"></dxi-item>
</dxi-tab>
<dxi-tab
title="Contacts"
[colCount]="2">
<dxi-item dataField="phone"></dxi-item>
<dxi-item dataField="email"></dxi-item>
</dxi-tab>
</dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
employee = {
name: "John Heart",
hireDate: new Date(2012, 4, 13),
city: "Los Angeles",
phone: "+1(213) 555-9392",
email: "jheart@dx-email.com"
}
}
@NgModule({
imports: [
// ...
DxFormModule
],
// ...
})Custom Content within a Tab
The Form widget allows you to specify custom templates for an individual tab and its content. For this purpose, assign callback functions to the tabTemplate and template options, respectively. With Angular, you can declare templates using the dxTemplate component.
jQuery
JavaScript
$(function() {
$("#formContainer").dxForm({
formData: {
name: "John Heart",
birthDate: new Date(1964, 3, 15),
position: "CEO",
city: "Los Angeles",
phone: "+1(213) 555-9392",
email: "jheart@dx-email.com"
},
items: ["name", {
itemType: "tabbed",
tabs: [{
title: "Data Protection Policy",
tabTemplate: function (itemData, itemIndex, itemElement) {
itemElement.append("<p style='color: red'>" + itemData.title);
},
template: function (itemData, itemIndex, itemElement) {
itemElement.append("<p><i>By filling out this form,"
+ " you agree to the terms of the"
+ "<a href='#'>Data Protection Policy</a></i></p>");
}
}, {
title: "Info",
items: ["position", "birthDate", "city"]
}, {
title: "Contacts",
items: [ "phone", "email"]
}]
}]
});
});Angular
HTML
TypeScript
<dx-form
[(formData)]="employee">
<dxi-item dataField="name"></dxi-item>
<dxi-item itemType="tabbed" [colSpan]="2">
<dxi-tab
title="Data Protection Policy"
tabTemplate="tab"
[template]="'tabContent'">
</dxi-tab>
<dxi-tab title="Info">
<dxi-item dataField="position"></dxi-item>
<dxi-item dataField="hireDate"></dxi-item>
<dxi-item dataField="city"></dxi-item>
</dxi-tab>
<dxi-tab title="Contacts">
<dxi-item dataField="phone"></dxi-item>
<dxi-item dataField="email"></dxi-item>
</dxi-tab>
</dxi-item>
<div *dxTemplate="let tabData of 'tab'; let i = index">
<p style="color:red">{{tabData.title}}</p>
</div>
<div *dxTemplate="let data of 'tabContent'">
<p>
<i>By filling out this form, you agree
to the terms of the <a href='#'>Data Protection Policy</a></i>
</p>
</div>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
employee = {
name: "John Heart",
birthDate: new Date(1964, 3, 15),
position: "CEO",
city: "Los Angeles",
phone: "+1(213) 555-9392",
email: "jheart@dx-email.com"
}
}
@NgModule({
imports: [
// ...
DxFormModule
],
// ...
})See Also
Configure the Tab Panel
For displaying tabs, the Form uses the TabPanel widget. Therefore, you can specify any options of the TabPanel in the tabPanelOptions object.
jQuery
JavaScript
$(function() {
$("#formContainer").dxForm({
formData: {
firstName: "John",
lastName: "Heart",
// ...
},
items: ["firstName", "lastName", {
itemType: "tabbed",
tabPanelOptions: {
height: 250,
onTitleClick: function (e) {
// ...
}
},
tabs: [ ... ]
}]
});
});Angular
HTML
TypeScript
<dx-form
[(formData)]="employee">
<dxi-item dataField="firstName"></dxi-item>
<dxi-item dataField="lastName"></dxi-item>
<dxi-item itemType="tabbed"
[tabPanelOptions]="{
height: 250,
onTitleClick: tabPanel_tabTitleClick
}">
</dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
employee = {
firstName: "John",
lastName: "Heart",
// ...
}
tabPanel_tabTitleClick (e) {
// ...
}
}
@NgModule({
imports: [
// ...
DxFormModule
],
// ...
})See Also
Feedback