Drag and drop between tree and grid

Suite and Optimus Suite 5
#1

Hi,
In my current task I am trying to create a page which has a layout 2U in which left side has a tree and right side has a grid. The aim is to drag the node from the tree and drop in grid. (Number of tree nodes is equal to the number of rows in grid which are already created.) e.g when I drag a node “ABC” and drop into second row of grid it should replace the second row second cell value by tree node text. Below are the problems I am facing.

  1. I dont want grid row to be dragable. only the tree nodes should be draggable.
  2. If i drag a node from tree and drop into row it replaces the second column values in that row but it also creates extra row, so is there any way that I can just replace the cell value and not create new row.
    I hope i am clear on my question.

Below is the code :
function manageAxis(){
var manageAxisWin = dhxWins1.createWindow(‘manageAxisDiv’, 0, 0, 500, 300);
manageAxisWin.setText(‘Manage Axes’);
manageAxisWin.denyResize();
manageAxisWin.setModal(1);
manageAxisWin.centerOnScreen();
manageAxisWin.button(‘park’).hide();
manageAxisWin.button(‘minmax1’).hide();

	var manageAxisLayout = manageAxisWin.attachLayout('2U');

	var cell_1 = manageAxisLayout.cells('a');
	cell_1.setHeight('150');
	cell_1.hideHeader();
	cell_1.fixSize(0,1);

	var treeRV = cell_1.attachTree();
	treeRV.setSkin('dhx_skyblue');
	treeRV.enableDragAndDrop('1', true);
	treeRV.enableMercyDrag(1);
	treeRV.insertNewChild(0, "Glossary", "Glossary");
	treeRV.insertNewChild("Glossary", "Terms", "Terms");
	treeRV.insertNewChild("Terms", "Classification nodes", "Classification nodes");
	
	var cell_2 = manageAxisLayout.cells('b');
	cell_2.hideHeader();

var mygrid = cell_2.attachGrid();
mygrid.selMultiRows = true;
mygrid.setImagePath("../../../dhtmlxGrid/codebase/imgs/");
var flds = "Axis,Object views";
mygrid.setHeader(flds);
mygrid.setInitWidths("50,*");
mygrid.setColAlign("center,center");
mygrid.setColTypes("ro,ro");
mygrid.enableDragAndDrop(true);
mygrid.init();
mygrid.setSkin("dhx_skyblue");
mygrid.addRow("1",["X-Axis","text2"])
mygrid.addRow("2",["Y1 Axis","text2"])
mygrid.addRow("3",["Y2 Axis","text2"])
mygrid.treeToGridElement = function(treeObj,treeNodeId,gridRowId){
          this.cells(gridRowId,1).setValue(treeObj.getItemText(treeNodeId));
    return false;
}

mygrid.onDrop = function(sId, tId, dId, sObj, tObj, sCol, tCol){
alert(“dropped”);
}

#2
  1. I dont want grid row to be dragable. only the tree nodes should be draggable.
    Please, try to use the following code:

mygrid.attachEvent("onBeforeDrag", function(id){ return false; });

  1. If i drag a node from tree and drop into row it replaces the second column values in that row but it also creates extra row, so is there any way that I can just replace the cell value and not create new row.
    Please ,try to use the following solution instead of treeToGridElement:

mygrid.attachEvent("onDrag", function(sId,tId,sObj,tObj,sInd,tInd){ if(sObj==treeRV){ tObj.cells(tId,2).setValue(sObj.getItemText(sId)) } return false });

#3

Not sure how this is working.
grid.attachEvent(“onDrop” - inserts an unwanted row into the grid and fires the dataprocessor

The suggested code snippet grid.attachEvent(“onDrag” will set the value of the desired cell but:

  1. does not fire the dataprocessor
  2. does not release the tree node attached to the cursor

How do you “drop” the value into the desired cell and release the cursor and fire the dataprocessor?

#4

How do you “drop” the value into the desired cell and release the cursor and fire the dataprocessor?

DataProcessor listens to 3 operations: editing, adding and deleting. setValue does not fire any events for DP. You can set “updated” status manually for a grid row:

myGrid.attachEvent("onDrag", function(sId,tId,sObj,tObj,sInd,tInd){ if(sObj==myTree){ tObj.cells(tId,2).setValue(sObj.getItemText(sId)) myDataProcessor.setUpdated(tId, true, "updated"); } return false });

#5

Thank you for your explanation.
The code change provided the results needed.

#6

Also you may try to enable the second attribute of your dataProcessor update mode, so it should trigger the drag and drop operations.
For example:
dp.setUpdateMode(“cell”, true);

docs.dhtmlx.com/api__dataprocess … emode.html