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();
Scheduler
myTabbar.tabs(id).attachScheduler();
Sidebar
myTabbar.tabs(id).attachSidebar();
Tabbar
myTabbar.tabs(id).attachTabbar();
Tree
myTabbar.tabs(id).attachTree();
TreeGrid
myTabbar.tabs(id).attachTreeGrid();
Vault
myTabbar.tabs(id).attachVault();


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>

Related sample:  Integration with dhtmlxGrid

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");

Related sample:  Integration with dhtmlxScheduler

Back to top