Start Building Professional
Web Apps Today

Reload tree has error

I have a tree that refreshes when an item is dragged from a GRID to the tree. I have an item on the tree that serves as a recycle bin which when an item is dragged into it from the grid it deletes the item from the database then refreshes the tree - at this point i get the following error:

Javascript ErrorThe next error ocured :
'parentObject' is null or not an object in http://dellbackup:200/directory.asp?tv=2 at line 25If you think that error can be caused by dhtmlxtree press the 'Generate report' button and send generated report to support@dhtmlx.com

It wont show me a report to generate. My code is below:

<script>
//data
var LANDING = 1
var XMLURL = "/inc_tree_functions_v2_data.asp?id=0";
//tree
tree=new dhtmlXTreeObject("treeboxbox_tree","180px","100%",0);
tree.setImagePath("/scripts/codebase/imgs/csh_bluefolders/");
tree.enableDragAndDrop(true);
tree.setDragBehavior("complex");
tree.enableItemEditor(true);
tree.setXMLAutoLoading(XMLURL);

tree.enableKeySearch(true);
tree.enableKeyboardNavigation(true);
/**/

//on drag confirm you want to delete
tree.setDragHandler(check_func);
function check_func(id_drag, id_landing){
if (id_landing =="-1") {
return confirm("Are you sure you want to delete this item?");
LANDING = "1"
} else {
LANDING = id_landing
return true;
}
}

//before edit check that its not recycle bin thats being edited.
tree.attachEvent("onEdit",function(state,nodeId,tree,value){
if (nodeId != -1) {
    return true;
    } else {
    return false;
    }
})

//Open the tree at the top (1)
// BUG: when you press return when a node is selected
tree.loadXML(XMLURL,function(){
tree.openItem('1');
});

//this function does the ONCLICK event stored in xml as a function
tree.setOnClickHandler(doOnClick);

function doOnClick(nodeId){
var myUrl = tree.getUserData(nodeId,"function");
eval(myUrl);
}

//back end processing
myDataProcessor = new dataProcessor("inc_tree_functions_v2_processor.asp");
//myDataProcessor.enableDebug(true);
myDataProcessor.init(tree);

// Once processing is done then you can do some more work    
myDataProcessor.setOnAfterUpdate(function(nodeId,cType,newId){
tree.deleteChildItems(0);
tree.loadXML(XMLURL,function(){
tree.openItem(LANDING);
});
});

</script>

>>'parentObject' is null or not an object
Such error can occur if you are executing command againg not existing item in tree.

>>if (id_landing =="-1") {
>>return confirm("Are you sure you want to delete this item?");
>>LANDING = "1"
Is it correct, that operation executed after return ?

Basically the function below:

//on drag confirm you want to delete
   tree.setDragHandler(check_func);
   function  check_func(id_drag, id_landing){
    if (id_landing =="-1") {
    return confirm("Are you sure you want to delete this item?");
    LANDING = "1"
    } else {
    LANDING = id_landing
    return true;
    }
   }

This checks when the file is copied into the Recycle bin (ID = -1) so I keep a global var of the landing id so that if I need to refresh the tree once deleting something I refresh from the top (1) and not from the recycle bin (-1).

Also, the error occurs after it successfully refreshes the tree.

Thanks

John

>>so I keep a global var of the landing id so that if I need to refresh the tree once deleting
This is clear, but the line
   LANDING = "1"
is never executed in above code, because it placed after return instruction.
The code seems correct, the only possible place for error is
tree.loadXML(XMLURL,function(){
    tree.openItem(LANDING);  // here , if LANDING has some incorrect value, error may occurs
});

Ahh that works a treat.

Just one question..  How can i stop the grid from showing the item bold and struckthru when I have dragged it out onto the tree?

Thanks

John

>>How can i stop the grid from showing the item bold and struckthru when I have dragged it out onto the tree?
This is caused by dataprocessor.
Dataprocessor marks new row with bold text and deleted rows with strike-through.
You can update dhtmlxdataprocessor.js
line 163
    this.obj.setRowTextBold(rowId);
line 532
    self.obj.setRowTextStyle(rowId,"text-decoration : line-through;");

You can change those line to some different visual styles, or just comment them ( it will not cause any side effects )

I have done as you have said, but it also doesnt remove the item from the grid, how do I also remove the item from the grid? can i do that in the following:

mygrid.gridToTreeElement = function(treeObj,treeNodeId,gridRowId){

    ===function here to remove from grid===

    return this.cells(gridRowId,1).getValue();   //this returns the value for the tree
   }

Thanks

John

If you are using dataprocessor in grid , then row will not be removed until confirmation from server received.
You can achieve necessary visual behavior by changing
    self.obj.setRowTextStyle(rowId,"text-decoration : line-through;");
with
    self.obj.setRowHidden(rowId,true);

Thanks, that does work by adding the "hidden" code. However, the when I drag the item from the grid to the tree all server based work is done correctly, why do you think its not getting confirmation?

GRID CODE (within an IFRAME):

   var mygrid;
   function doInitGrid(){
   mygrid = new dhtmlXGridObject('itemlist');
   mygrid.setImagePath("/scripts/codebase/imgs/");
   mygrid.setHeader(",Name,Type,Date,Filename,");
   mygrid.setInitWidths("30,*,80,70,*,70");
   //mygrid.enableAutoHeight(false,400,true);
   mygrid.setSizes();
   mygrid.setColAlign("left,left,left,left,left,center");
   mygrid.setColSorting("str,str,str,date,str,str");
   mygrid.setColTypes("img,ed,ro,ro,ro,link");

   mygrid.enableMultiselect(true);
   mygrid.setSkin("modern");
   mygrid.enableDragAndDrop(true);
   mygrid.enableResizing("false");
   mygrid.init();
   
   XMLURL = "item_list_v2_data.asp?type=<%=strItemType%>&itemid=<%=folderid%>&parentid=<%=currentparent%>"
   mygrid.loadXML(XMLURL);
   

   //redefine grid-to-tree drop element
   mygrid.gridToTreeElement = function(treeObj,treeNodeId,gridRowId){
    return this.cells(gridRowId,1).getValue();
   }
   mygrid.rowToDragElement = function (id){
    if(this.cells(id,1).getValue()!="") return this.cells(id,1).getValue();
    
   }
   
   //init dataprocessor
   myDataProcessor = new dataProcessor("/item_list_v2_processor.asp");
   myDataProcessor.setUpdateMode("row");
   myDataProcessor.init(mygrid);

  }

TREE CODE

 //data
    var LANDING = 1
    var XMLURL = "/inc_tree_functions_v2_data.asp?id=0";
    //tree
             tree=new dhtmlXTreeObject("treeboxbox_tree","180px","100%",0);
             tree.setImagePath("/scripts/codebase/imgs/csh_bluefolders/");
             tree.enableDragAndDrop(true);
             tree.setDragBehavior("complex");
    tree.enableItemEditor(true);
    tree.setXMLAutoLoading(XMLURL);
    tree.enableKeySearch(true);
    tree.enableKeyboardNavigation(true);
    /**/

   //on drag confirm you want to delete
   tree.setDragHandler(check_func);
   function  check_func(id_drag, id_landing){
    if (id_landing =="-1") {
    LANDING = "1"
    return confirm("Are you sure you want to delete this item?");
    } else {
    LANDING = id_landing
    return true;
    }
   }
   
   //before edit check that its not recycle bin thats being edited.
   tree.attachEvent("onEdit",function(state,nodeId,tree,value){
    if (nodeId != -1) {
     return true;
     } else {
     return false;
     }
   })
  
    //Open the tree at the top (1)
    tree.loadXML(XMLURL,function(){
    if (tree.loadOpenStates()) {
     tree.loadOpenStates();
    } else {
     tree.openItem('1');
    }
    });
 
    //this function does the ONCLICK event stored in xml as a function
    tree.setOnClickHandler(doOnClick);
   
    function doOnClick(nodeId){
    var myUrl = tree.getUserData(nodeId,"function");
    eval(myUrl);
    }
    
     //back end processing
              myDataProcessor = new dataProcessor("inc_tree_functions_v2_processor.asp");
     //myDataProcessor.enableDebug(true);
     myDataProcessor.init(tree);
       
     // Once processing is done then you can do some more work 
     myDataProcessor.setOnAfterUpdate(function(nodeId,cType,newId){
    tree.deleteChildItems(0);
    tree.loadXML(XMLURL,function(){
    tree.openItem(LANDING);
    });
     });

It probably receives confirmation, but some time after d-n-d.
You are using
      myDataProcessor.setUpdateMode("row");
which means , update in grid will start only after selection in grid was changed or Enter key pressed.

In case of d-n-d from grid to tree, row in grid marked as deleted , but data sending to server not triggered. Row marked as deleted ( strike-through styling by default ) and awaits the sync. with server. After you trigger data sending, by selecting some row in grid - data will be sent to server , confirmation received and row fully removed from grid.

If row not removed from grid, even after sync. with server done - it may be caused by incorrect server side response ( incorrect action or sid attribute value )

Could it be that there is only server side action occuring within the tree? i.e. as the item is dropped on tree then the code in the dataprocessor (with tree) runs and removes the item from the database and therefore sends back confirmation to tree. Is there a way I can manually then send confirmation to grid?

The client side code of grid will be triggered in any case ( it react on deleteRow command ) , but the server side response is less predictable.
You can try to add next code
    dataproc.afterUpdateCallback(id,id,"delete"); //id - id of row in question
Reaction will be equal to server side response on delete action.