drag and drop grid to tree - with dataprocessor


Initially I had a grid that had NO dataprocessor associated with it.

I set up a layout control where I have a tree on the left and a grid on the right. Essentially creating a file browser. I have the ability to drag and drop a grid row into a different folder in the tree on the left.

This all worked fine before I added a dataprocessor to the grid. I added a dataprocessor to the grid so that I can delete rows.

Now when I drag a row from the grid onto a different folder in the tree, instead of the row being removed from the grid automatically, it just gets “crossed out” and remains…although the underlying code still functions properly.

Why is the row not being removed from the grid anymore now that I have a dataprocessor attached?

Please check this article dhtmlx.com/docs/products/kb/inde … aprocessor


The issue is not reproduced locally. The grid row is removed after the response is received from the server.

Please, try to use the latest dataprocessor libraries (attached). The dhtmlxdataprocessor_debug.js gives you the information about data that is sent and received from the server

If the problem persists, please provide the direct link to problematic page

dp.zip (7.02 KB)

I have altered your sample file included with DHTML Suite.

I have altered the dhtmlGrid\samples\drag_n_drop\drag_grid.html file.

I simply included the dhtmlxdataprocessor.js and then associated a dataprocessor to mygrid3 on lines 85-88.  As you can see, eventhough the dataprocessor is not being called, by simply creating one for the grid it stops the grid row from being removed when the drag and drop occurs.  It simply strikes out the row.

This is the problem I do not quite understand. 

As explained above, I initially did not have a dataprocessor associated with my grid and everything worked fine.  Now I want to be able to delete rows from the grid (as well as drag and drop) so I needed to associate a dataprocessor with the grid as shown in the example.


drag_grid.zip (1.79 KB)

Dear Michael,

We use Data Processor when we want to send data to the server.

In your example oDP.setUpdateMode(“off”). So, Data Processor doesn’t send data automatically and it is necessary to use oDP.sendData().

And another issue is that you didn’t set any server-side script which will process the received changes:

oDP = new dataProcessor(some_script);

The row will be deleted only after the necessary response will be received from the server:

Please, take a look at the sample in the documentation: dhtmlxGrid/samples/dataprocessor/savedata_grid.html

The article is dhtmlxGrid/doc/articles/Dataprocesor_usage.html

Yes, I completely understand how to use the dataprocessor, I have used it many, many times.  I think we are having a mis-understanding as to my question.

Let me try to explain again.

Initially I had no dataprocessor for my scenario.  I simply had a tree on the left pane of layout and a grid on the right.  I would click through tree and grid would change on the right hand side according to data associated with each folder.

I was able to drag and drop a row from grid (which represented a file) onto another folder.  For the tree_onDrop event, I send an dhtmlxAjax.post request to update the database which would move files in database from one folder to another.  Everything worked fine.

Now I wanted to enhance this for user to also be able to delete rows from the grid…which would NEED a dataprocessor.  The dataprocessor properly works in my real application.  I can highlight rows and delete using .sendData to a server-side script.

My issue is wandering why this screws up the drag and drop feature??  When I had no dataprocessor associated to grid, the drag and drop would remove row automatically from grid as shown in my previous attached example.

So, you don’t want to call dataprocessor processing for row which dragged from grid to tree…

In this case you can try to use the following approach:

1) you should set flag which means that row is dropped to tree:

if(sObj!=tree) sObj._skipDeleteProcess = 1; /if item is dropped from another object/
return true

2) then you need to make a small modification in the dhtmlxdataprocessor.js:

please, locate this.obj.attachEvent(“onBeforeRowDeleted”,function(rowId){

and replace it with:


if (this._skipDeleteProcess){this._skipDeleteProcess=0; return true;}

I’m certainly not opposed to using the dataprocessor for both situations. 

I am using the dhtmlxAjax.post for the tree_onDrop event because I need to not only send information from the grid but also for target folder.  How would I send my target folder id along with the dataprocessor information when performing drag and drop, since dataprocessor information only passes grid information?

If there is a way to send this information as well, I would certainly rather use the dataprocessor for both situations rather than having to modify the .js file for any reason.

Any suggestions?

Thanks again. 

In the previous posts you wrote that a row becomes crossed out after drag-n-drop. The provided approach is the only way to avoid this behaviour.

The parent item from the tree can be added into the dataprocessor request using userdata (userdata of changed row is also sent to the server).

Ok, sorry to keep asking questions about this, but I am close to a solution.

There is no need for me to alter the .js file. 

I am now using the dataprocessor exclusively for processing my data. I read your latest response and used the setUserData for the dataprocessor in order to send along the target folder id to which I am moving files into from grid.  By simply returning XML when moving grid rows into a different folder, the rows remove themselves from the grid…just like on a normal delete action.  They no longer stay in a crossed-out state.

However, now I have a different problem.  Currenlty, I am sending the data on the tree “onDrop” event because this is how I get the target folder id.  The problem is that if I drag more than one row from the grid, this fires multiple times.  So I really don’t want to send the dataprocessor information multiple times. 

What I would like to do is as follows:

1.  Capture all “source” rowIds from the grid when dragging multiple rows to a new folder and build a global list of these grid row ids on the tree “onDrop” event.
2.  Then cycle through the grid rows being moved and update each row with the target folder id by setting the userdata attribute for each row.

My question is how can I then send the data “once”?  Is there a way to know when the tree “onDrop” events are done firing?  Because at that point I will have all the data I need and can .sendData at that point.

Hope this makes sense.

Or is there simply a way to get a count of the number of rows I am moving? 

This way I can just have an if statement in my tree “onDrop” event and have a static counter.  Then when my counter equals the number of rows being moved I can send the data.  Just a thought.

In case of moving several rows at once, onDrop event handler gets the list on moved rows:


var arr = sid.split(",");

for(var i = 0; i < arr.length;i++){

/your code here/



It is possible to send all changed data with one request:


Please, see details about the parameters which is passed to the server: dhtmlxGrid/doc/articles/Dataprocesor_usage.html

Yes, I already have dp.setUpdateMode(“POST”,true). 

I have dp.sendData also on “onDrop” event of tree.  However, this event is firing multiple times for each grid row being dropped. 

I “do not” see a comma delimited list of rowIds as you state above.  If I drop 3 rows, then the “onDrop” event fires 3 times.  If it would act as you suggest above, this would be great.  Is there another tree or grid setting I need to set in order to see the results you suggest above?  This would avoid my dataprocessor from being sent multiple times.

Sorry, for the misleading information. Actually only grid onDrop contains the list of ids in the first parameter.

geSelectedId() method of the grid returns the list of selected items. So, there is another approach you can try to use:

var dragged_ids = “”;


dragged_ids = grid.getSelectedId();

return true


if((sObj==grid)&&(dragged_ids == grid.getSelectedId())){

var arr = dragged_ids.split(",");

for(var i = 0; i < arr.length;i++){

/your code here/



return true

Thanks! That should do it.  Thanks for the patience.