Professional edition of dhtmlxGrid and dhtmlxTreeGrid has the ability to activate a contextual menu (based on dhtmlxMenu). For doing this, follow the following code should be used:

    <script src="../codebase/dhtmlxcommon.js"></script> 
    <script src="../codebase/dhtmlxgrid.js"></script> 
    <script src="../codebase/dhtmlxgridcell.js"></script> 
 
    <script language="JavaScript" src="../../../dhtmlxMenu/codebase/dhtmlxmenu.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxMenu/codebase/skins/dhtmlxmenu_dhx_skyblue.css">
 
    <script> 
        // create a function for processing menu commands
        function onButtonClick(menuitemId)
        {
            // get array the first element of which is row id, second - cell index
            var data=mygrid.contextID.split("_"); //rowId_colInd
            // use input data to perform any action the user needs
            grid.setRowTextStyle(data[0],"background-color:"+menuitemId.split("_")[1]);
        }
 
        // Create a menu
	menu = new dhtmlXMenuObject();
	menu.setIconsPath("../common/images/");
	menu.renderAsContextMenu();
	menu.attachEvent("onClick",onButtonClick);
	menu.loadXML("../common/_context.xml");
 
        // initialize the grid and attach the menu to it
        grid = new dhtmlXGridObject('gridbox');
        ...
        grid.enableContextMenu(aMenu);
        grid.init();
        grid.loadXML("grid_links.xml");
    </script>
 

The mygrid.contextID is a complex string consisting of row id and column index delimited with “_”.

Starting from dhtmlxMenu 2.x there is no need in any extra steps is case of HTTPS mode.

This functionality is available in Professional Edition only. Both components need to have drag-n-drop enabled. The complexity of drag-and-drop between the tree and the grid lies in different structure of data in them. So, the user should define what values in the grid should go to the tree node and how to store them there and vice versa. There are two methods in the grid for this:

    <script>
        treeToGridElement(treeObj,treeNodeId,gridRowId);
        gridToTreeElement(treeObj,treeNodeId,gridRowId);
    </script>
 

All the user should do is to redefine them in the way he needs. For example:

    <script>
    // redefine tree-to-grid drop element
    grid.treeToGridElement = function(treeObj,treeNodeId,gridRowId){
        this.cells(gridRowId,1).setValue(treeObj.getItemText(treeNodeId));
        if(treeObj.getUserData(treeNodeId,"c0")){
            this.cells(gridRowId,0).setValue(treeObj.getUserData(treeNodeId,"c0"));
            this.cells(gridRowId,1).setValue(treeObj.getUserData(treeNodeId,"c1"));
            this.cells(gridRowId,2).setValue(treeObj.getUserData(treeNodeId,"c2"));
            this.cells(gridRowId,3).setValue(treeObj.getUserData(treeNodeId,"c3"));
        }
        return !document.getElementById("dnd_copy").checked;
    }
    // redefine grid-to-tree drop element
    grid.gridToTreeElement = function(treeObj,treeNodeId,gridRowId){
        treeObj.setItemText(treeNodeId,this.cells(gridRowId,1).getValue()+"/"+this.cells(gridRowId,2).getValue())           
        treeObj.setUserData(treeNodeId,"c0",this.cells(gridRowId,0).getValue())
        treeObj.setUserData(treeNodeId,"c1",this.cells(gridRowId,1).getValue())
        treeObj.setUserData(treeNodeId,"c2",this.cells(gridRowId,2).getValue())
        treeObj.setUserData(treeNodeId,"c3",this.cells(gridRowId,3).getValue())
        return !document.getElementById("dnd_copy").checked;
    }
    </script>
 

Starting from dhtmlxGrid 1.3, integration with dhtmlxCombo became possible. The grid supports “combo” excell type that was transformed to dhtmlxCombobox component. “Combo” excell supports all modes of the dhtmlxCombo.

There are two ways for combo setting definition:

• For the whole column;
• For a certain cell.

Combo loading and representation modes are set by especial attributes in the XML:

• xmlcontent - in this case, options can be defined directly in grid XML;
• source - the source of combo XML;
• editable - boolean, 1 by default;
• filtering - boolean, 0 by default, enables filtering mode (the same as enableFilteringMode() for the combo);
• auto - boolean, 0 by default, enables autocomplete mode (the same as enableFilteringMode(mode,source) for the combo):
• cache - boolean, additional parameter for autocomplete mode; xml suggestions are cached (the same as enableFilteringMode(mode,source,cache));
• sub - boolean, additional parameter for autocomplete mode; enables auto load additional suggestions on selecting last loaded option (the same as enableFilteringMode(mode,source,cache,sub).

The combo can be set in the <column> tag for the whole column:

    <column width="150" type="combo" xmlcontent="1"…>TEXT
        <option value="1">one</option> 
        <option value="2">two</option> 
        <option value="3">three</option> 
        …
    </column>
    <column width="150" type="combo" editable="false" source="data.xml" …>TEXT</column>
    <column type="combo" source="complete.php" auto="true" cache="true" sub="true"… >TEXT</column>
 

Combo value should be set inside <cell> tags:

    <cell>1</cell>
 

In case of auto complete, <cell>value^text</cell> instruction defines the value and the text:

    <cell>1^one</cell>
 

Cell's combo is set as column's one, the difference is in using <cell> tag instead of <column> one. In this case, the xmlcontent attribute is always necessary:

    <cell xmlcontent="1" editable="0">1
        <option value="1">one</option> 
        <option value="2">two</option> 
        <option value="3">three</option> 
        ...
    </cell> <cell xmlcontent="1" source="data.xml" filter="true">1</cell>
 

In case of autocomplete mode, the text should be set with the text attribute:

    <cell xmlcontent="1" source="complete.php" auto="true" cache="true" text="some text">4</cell>
 

getCellCombo() method returns cell combo object:

        combo = grid.cells(id,index).getCellCombo();

getColumnCombo() method returns column combo object:

        combo = grid.getColumnCombo(column_index);