DHTMLX Docs & Samples Explorer

Index
dhtmlxgrid

## Compatibility with Other Components

### Contextual Menu in Grid

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 “_”.

#### HTTPS Compatibility

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

### Interaction with dhtmlxTree (Drag-and-Drop Between Components)

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>

### Integration with dhtmlxCombo

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).

#### Setting "combo" Сolumn

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>

#### Setting "combo" 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>

#### Getting Cell/Column Object

getCellCombo() method returns cell combo object:

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

getColumnCombo() method returns column combo object:

            combo = grid.getColumnCombo(column_index);