Attaching Components

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

Accordion	`dhxComponent.cells(id).attachAccordion();`
Carousel	`dhxComponent.cells(id).attachCarousel();`
Chart	`dhxComponent.cells(id).attachChart();`
DataView	`dhxComponent.cells(id).attachDataView();`
Editor	`dhxComponent.cells(id).attachEditor();`
Form	`dhxComponent.cells(id).attachForm();`
Grid	`dhxComponent.cells(id).attachGrid();`
Layout	`dhxComponent.cells(id).attachLayout();`
List	`dhxComponent.cells(id).attachList();`
Menu	`dhxComponent.cells(id).attachMenu();`
Ribbon	`dhxComponent.cells(id).attachRibbon();`
Scheduler	`dhxComponent.cells(id).attachScheduler();`
Sidebar	`dhxComponent.cells(id).attachSidebar();`
StatusBar	`dhxComponent.cells(id).attachStatusBar();`
Tabbar	`dhxComponent.cells(id).attachTabbar();`
Toolbar	`dhxComponent.cells(id).attachToolbar();`
Tree	`dhxComponent.cells(id).attachTree();`
TreeView	`dhxComponent.cells(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.

Please note that attaching of Menu, Ribbon, Toolbar and StatusBar into a cell has some peculiarities. For details check the article Attaching Menu/Status Bar.

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 = dhxComponent.cells(id).getAttachedObject();
if (window.dhtmlXGridObject != null && attached instanceof window.dhtmlXGridObject) {
    console.log("An attached grid detected");
}

Detaching components

// attach
var myAcc = dhxComponent.cells(id).attachAccordion({...});
 
// detach later
dhxComponent.cells(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 layout.

var myLayout = new dhtmlXLayoutObject(document.body, "3L");
myLayout.cells("a").setWidth(800);
 
// configure scheduler if needed
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
// then attach it to layout
myLayout.cells("a").attachScheduler(new Date(), "month");
// load some data
scheduler.load("../common/events.xml");