DevExtreme jQuery/JS - In Tabs

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.

View Demo

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.

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.

See Also