Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Allan Fan on Aug 27, 2009 11:42
open dhtmlx forum
treeToGridElement error

Hi,

I'm trying sth very similar to your "DHTML Tree + Grid sample" example. The following error occurs when I drag an item from the tree to the grid.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; InfoPath.1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; OfficeLiveConnector.1.3; OfficeLivePatch.1.3; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Thu, 27 Aug 2009 18:39:03 UTC


Message: 'length' is null or not an object
Line: 721
Char: 105
Code: 0
URI: http://ec2-174-129-94-142.compute1.amazonaws.com/mnt/dhtmlx_test/dhtmlxSuite_2009Rel1_pro_90226/dhtmlxGrid/codebase/dhtmlxgrid.js




The related code is as follows:

var holdingsRelValLayout = new dhtmlXLayoutObject('holdingsRelValLayout', "2U");
holdingsRelValLayout.setEffect("resize", true);

holdingsRelValLayout.cells("a").setText('Holdings');
holdingsRelValLayout.cells("a").setWidth(250);
var holdingsRelValTree = holdingsRelValLayout.cells("a").attachTree();
holdingsRelValTree.enableTextSigns("true");
holdingsRelValTree.enableTreeImages("false");
holdingsRelValTree.enableTreeLines("false");
holdingsRelValTree.enableMultiselection(true);
holdingsRelValTree.enableDragAndDrop(true);
holdingsRelValTree.enableMercyDrag(true);
holdingsRelValTree.enableHighlighting(true);
holdingsRelValTree.loadXML("holdings.xml");
holdingsRelValTree.openAllItemsDynamic();

holdingsRelValLayout.cells("b").setText('Rel Val');
var holdingsRelValGrid = holdingsRelValLayout.cells("b").attachGrid();
holdingsRelValGrid.setHeader("CUSIP");
holdingsRelValGrid.setInitWidthsP("100");
holdingsRelValGrid.enableDragAndDrop(true);
holdingsRelValGrid.init();
holdingsRelValGrid.treeToGridElement = function(treeObj,treeNodeId,gridRowId)
{
grid.setImagePath("../../../dhtmlxGrid/codebase/imgs/");
grid.enableDistributedParsing(true,50,300);
grid.loadXML("query2.py?table=HoldingsRelVal&xquery=WHERE CUSIP=='" + treeObj.getItemText(treeNodeId) + "'" + '&head=1&etc='+new Date().getTime());
}


Thank you.
Answer posted by Alex (support) on Aug 28, 2009 02:43

Hello,

Method treeToGridElement  must return some value - the row that will be inserted into the grid:

holdingsRelValGrid.treeToGridElement = function(treeObj,treeNodeId,gridRowId){
  return [0,treeObj.getItemText(treeNodeId)];

}

If you want to present some custom action when tree is dropped, you can deny drag-n-drop and call some custom function:

holdingsRelValGrid.attachEvent("onDrag",function(sid,tid,sObj,tobj){
  if(sObj==holdingsRelValGrid){
  /*your code here*/
  return false
  }
  return true
})

Also there are some another issues in your code:

holdingsRelValTree.openAllItemsDynamic() - for dynamic trees and shtmlx be called after root loading:

var holdingsRelValTree = holdingsRelValLayout.cells("a").attachTree(0);
...
holdingsRelValTree.loadXML("holdings.xml",function(){
  holdingsRelValTree.openAllItems(0)
});



Answer posted by Allan Fan on Aug 28, 2009 08:58
Can you please tell me where I can find the doc for these variable: sid,tid,sObj,tobj in function holdingsRelValGrid.attachEvent("onDrag",function(sid,tid,sObj,tobj)

Thanks.
Answer posted by Support on Aug 28, 2009 09:55
Short reference of events and their parameters
    http://dhtmlx.com/docs/products/dhtmlxGrid/doc/events.html#grid_api_ev
Extra details about d-n-d events
    http://dhtmlx.com/docs/products/dhtmlxGrid/doc/articles/Managed_Drag_and_Drop.html#grid_mandnd