Attaching Menu/Status Bar

You can use Menu, Toolbar and Ribbon components as a menu bar and attach them to the top of a cell. A cell can also have a simple status bar at the bottom added with the help of the StatusBar component.

You can attach several of these components at a time together with other content of a Layout-based component.

Attaching Menu

1) Include dhtmlxMenu source files on the page:

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

2) Call the corresponding function:

var myMenu = dhxComponent.cells(id).attachMenu({
    // menu conf here
});

3) Learn more about dhtmlxMenu from the related documentation.

Attaching Toolbar

1) Include dhtmlxToolbar source files on the page:

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

2) Call the corresponding function:

var myToolbar = dhxComponent.cells(id).attachToolbar({
    // toolbar conf here
});

3) Learn more about dhtmlxToolbar from the related documentation.

Attaching Ribbon

1) Include dhtmlxRibbon source files on the page:

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

2) Call the corresponding function:

var myRibbon = dhxComponent.cells(id).attachRibbon({
    // ribbon conf here
});

3) Learn more about dhtmlxRibbon from the related documentation.

Attaching StatusBar

1) There's no need to include extra .js/.css files.

2) Call the corresponding function:

var sbObj = dhxComponent.cells(id).attachStatusBar({
    // status bar config here, optional
    text:   "some text here",   // status bar text
    height: 35                  // custom height
});
 
// set status bar text
sbObj.setText("New text");
 
// get status bar text
var text = sbObj.getText();

What else?

1) You can show/hide any attached control without unloading it from memory, for example:

dhxComponent.cells(id).showMenu();
dhxComponent.cells(id).hideMenu();

2) You can detach and unload the attached control completely, for example:

// init
var myMenu = dhxComponent.cells(id).attachMenu({...});
 
// detach later
dhxComponent.cells(id).detachMenu();
myMenu = null;

3) You can get link to the component's instance:

var myMenu = dhxComponent.cells(id).getAttachedMenu();
if (myMenu == null) {
    // not inited
    myMenu = dhxComponent.cells(id).attachMenu({...});
}