Check documentation for the latest version of dhtmlxSuite Attaching Components DHTMLX Docs

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");
Back to top