Work with Tabbar

dhtmlxTabbar 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 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
var id = tabbar.getId(0);
tabbar.removeTab(id);

Related sample:  Tabbar. 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:

var 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:

var 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.

var 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"}
    ]
});
 
var 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 to a cell of Tabbar using the attach method of a cell:

var dataview = new dhx.DataView(null, {
    template: dataviewTemplate,
    itemsInRow: 3,
    gap: "10px"
});
 
dataview.data.parse(dataset);
 
tabbar.getCell("dataview").attach(dataview);

Related sample:  Tabbar. Attach

Back to top