Attaching Components

Almost all DHTMLX components can be attached directly to a cell by the corresponding method.

Accordion	`myTabbar.tabs(id).attachAccordion();`
Carousel	`myTabbar.tabs(id).attachCarousel();`
Chart	`myTabbar.tabs(id).attachChart();`
DataView	`myTabbar.tabs(id).attachDataView();`
Editor	`myTabbar.tabs(id).attachEditor();`
Form	`myTabbar.tabs(id).attachForm();`
Grid	`myTabbar.tabs(id).attachGrid();`
Layout	`myTabbar.tabs(id).attachLayout();`
List	`myTabbar.tabs(id).attachList();`
Menu	`myTabbar.tabs(id).attachMenu();`
Ribbon	`myTabbar.tabs(id).attachRibbon();`
Scheduler	`myTabbar.tabs(id).attachScheduler();`
Sidebar	`myTabbar.tabs(id).attachSidebar();`
StatusBar	`myTabbar.tabs(id).attachStatusBar();`
Tabbar	`myTabbar.tabs(id).attachTabbar();`
Toolbar	`myTabbar.tabs(id).attachToolbar();`
Tree	`myTabbar.tabs(id).attachTree();`
TreeView	`myTabbar.tabs(id).attachTreeView();`

We highly recommend you to follow this way of attaching components, as it guarantees proper rendering and correct resizing of embedded components in relation to their parent container.

Make sure you've included the corresponding JS/CSS files of the related component on a page, for example:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxgrid.css">
    <script src="dhtmlxgrid.js"></script>
</head>

Getting the attached component

There is a possibility to get link to the attached component:

var attached = myTabbar.tabs(id).getAttachedObject();
if (window.dhtmlXGridObject != null && attached instanceof window.dhtmlXGridObject) {
    console.log("An attached grid detected");
}

Detaching components

// attach
var myAcc = myTabbar.tabs(id).attachAccordion({...});
 
// detach later
myTabbar.tabs(id).detachObject(true);
myAcc = null;

Scheduler specificity

Please note, the attachScheduler method differs from other attaching methods. The difference is that attachScheduler not only attaches the component but also initializes it - creates an instance with the predefined structure.

Therefore:

The attachScheduler method doesn't return a component object;
The attachScheduler method can be called only once;
If you need to set some configuration options for the scheduler, set them before attaching scheduler to the tabbar.

myTabbar = new dhtmlXTabBar("my_tabbar");
 
myTabbar.addTab("a1", "Tab 1-1", null, null, true);
myTabbar.addTab("a2", "Tab 1-2");
 
// configure scheduler if needed
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
// then attach it to the tabbar
myTabbar.tabs("a1").attachScheduler(new Date(), "month");
// load some data
scheduler.load("../common/events.xml");