DHTMLX Docs & Samples Explorer

Integration with Other dhtmlx Components

dhtmlxAccordion is compatible with the following dhtmlx Components:

  • dhtmlxGrid/TreeGrid;
  • dhtmlxTree;
  • dhtmlxTabbar;
  • dhtmlxFolders;
  • dhtmlxLayout;
  • dhtmlxMenu;
  • dhtmlxToolbar;
  • dhtmlxEditor.

Also a simple Status Bar can be attached to any Accordion's item.

First of all, the user needs to download the necessary packages from the server and set paths to necessary files from them into the <head> tag of our html. The files to which the paths need to be specified should be checked in the documentation describing work with the corresponding component. Any of the above mentioned components can be easily attached to an Accordion item:

    <script>
        var grid = dhxAccord.cells("a1").attachGrid();
        // or
        var tree = dhxAccord.cells("a1").attachTree();
        // or
        var treeGrid = dhxAccord.cells("a1").attachGrid();
        // or
        var folders = dhxAccord.cells("a1").attachFolders();
        // or
        var tabbar = dhxAccord.cells("a1").attachTabbar();
        // or
        var layout = dhxAccord.cells("a1").attachLayout("3L");
        // or
        var menu = dhxAccord.cells("a1").attachMenu();
        // or
        var tollbar = dhxAccord.cells("a1").attachToolbar();  
        // or
        var editor = dhxAccord.cells("a1").attachEditor();
        // or
        var statusBar = dhxAccord.cells("a1").attachStatusBar();   
    </script>

attach[Component]() method doesn't take any input parameters for each accordion compatible component except for dhtmlxLayout and dhtmlxTree.

Only one input parameter should be indicated for attachLayout() method, which is Layout's pattern type.

There is only one input parameter for attachTree() method. The parameter is the id of a virtual super item that is a parent to all the top level tree nodes of the added dhtmlxTree (see dhtmlxTree constructor description for details). If super root element id is 0, this parameter can be omitted.

Please note if you want to attach dhtmlxGrid with paging to the dhtmlxAccordion cell you should use attachObject() method to attach container with grid and paging area:

   dhxAccordion.cells("a").attachObject("paging_container");