Documentation

Attaching Menu/Toolbar/Status

There is a possibility to attach menu, toolbar and ribbon to a cell's top and status bar to a cell's bottom. Several components can be attached at a time.

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 status bar

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({...});
}
Back to top