Work with Tabbar

DHTMLX Tabbar inherits its API from dhtmlxLayout. So, you can apply any methods of Layout to manipulate Tabbar.

Adding/removing tabs

You can quickly add/remove tabs of Tabbar on the fly with the help of the corresponding methods - addTab() and removeTab().

The addTab() method takes two parameters:

view	(object) an object of a tab. It may include the following properties: tab - the name of a tab tabCss - the name of the CSS class used for a tab css - the name of the CSS class used for a cell header - the header of a cell
index	(number) the position to add a tab into

// adding a new tab
tabbar.addTab({tab: "tab-" + nextTab++, css:"panel flex"}, 0);

Related sample: Tabbar. Add / remove tab

The removeTab() method expects the id of a tab you want to remove as its parameter. You can get the id of a tab via the getId() method:

// removing a tab
const id = tabbar.getId(0);
tabbar.removeTab(id);

Related sample: Tabbar. Add / remove tab

Getting the id of a tab

In order to get the id of a tab, make use of the getId() method. It takes the index of the tab in question as a parameter:

const id = tabbar.getId(0);

Setting/getting the active tab

It is possible to set the active tab via Tabbar API, i.e. with the help of the setActive() method. It takes the id of a tab as a parameter:

const tabbar = new dhx.Tabbar("tabbar_container", {
    mode: "top",            
    views:[
        { id: "1", tab: "tab-1", css:"panel flex"},
        { id: "2", tab: "tab-2", css:"panel flex"},
        { id: "3", tab: "tab-3", css:"panel flex"},
        { id: "4", tab: "tab-4", css:"panel flex"}
    ]
});

tabbar.setActive("2");

Related sample: Tabbar. Set active

To identify what tab is currently active, apply the getActive() method. It will return the id of the active tab.

const tabbar = new dhx.Tabbar("tabbar_container", {
    mode: "top",            
    views:[
        { id: "1", tab: "tab-1", css:"panel flex"},
        { id: "2", tab: "tab-2", css:"panel flex"},
        { id: "3", tab: "tab-3", css:"panel flex"},
        { id: "4", tab: "tab-4", css:"panel flex"}
    ]
});

const active = tabbar.getActive(); // -> "2"

Related sample: Tabbar. Get active

Enabling/disabling a tab

To enable a tab, use the enableTab() method:

tabbar.enableTab("London");

To disable a tab, use the disableTab() method:

tabbar.disableTab("London");
// -> true|false

Related sample: Tabbar. Disable tab

Checking if a tab is disabled

To check if a tab is disabled, pass the id of the tab as an argument to the isDisabled() method:

tabbar.isDisabled("London"); // -> returns true/false

To check if a currently active tab is disabled, call the isDisabled() method without parameters:

tabbar.isDisabled(); // -> returns true/false

Related sample: Tabbar. Is disabled tab

Attaching a component to a cell

You can easily attach any DHTMLX component (except for Message, Popup, Window) to a cell of Tabbar using the attach method of a cell:

const dataview = new dhx.DataView(null, {
    template: dataviewTemplate,
    itemsInRow: 3,
    gap: "10px"
});

dataview.data.parse(dataset);

tabbar.getCell("dataview").attach(dataview);

Related sample: Tabbar. Attach widget

note

The Message, Popup, Window components can't be attached to the Tabbar cell because these components can't have the parent container due to their architecture principles.

Attaching an HTML content to a cell

You can easily attach some HTML content to a cell of Tabbar via the attachHTML() method of a cell. It takes as a parameter a string with HTML.

const tabbar = new dhx.Tabbar("tabbar_container", {
    mode: "top",
    css: "dhx_widget--bordered",
    views: [
        { id: "vilnius", tab: "Vilnius" },
    ]
});

tabbar.getCell("vilnius").attachHTML("<p>Information about Vilnius</p>");