Drag n Drop in dhtml Grid


I need to use Drag n Drop functionality with dhtml grid.

I can easily D-n-D whole row.

But I want to drag n drop control i.e. like

d a t a
which contains data and it can be place in any of row in any of column.
And that
can move any or row / column of grid.

How i can achieve this…?


You can control Drag-and-Drop in Grid with drag-and-drop events. Please check more information here docs.dhtmlx.com/doku.php?id=dhtm … g_and_drop
docs.dhtmlx.com/doku.php?id=dhtm … g_and_drop

I tried drag-n-drop but it only drag the whole rows not particular item (control) in cells…

In my case, I generate div control dynamically and place it on cell.

and now I want o drag-n-drop that div control on any of cell.

dhtmlxGrid doesn’t have such functionality. It not possible to drag external div into grid cell.

No, that is not an external div.
It is placed in dhtmlx grids cell. and I need to move that div to another cell of any row.

Please see the attached file.

In that, two rows of dhtmlxgrid there and some of cells contains colored boxes.

I want to drag-n-drop that colored box into other cells (blank cells).
for exp.
I want to drag-n-drop 26 nos box to 19 nos cell.

You can use “onDrag” event to check at which cell drag-and-drop starts and at which cell drag-and-drop ends
docs.dhtmlx.com/doku.php?id=dhtm … ent_ondrag

Could you please send me any sample for it.

In which, you moved data of cell’s in any of cell’s of grid.

Unfortunately there is no ready sample for such use-case, but it doesn’t require any complex actions. onDrag event provide ids of start and end row , as well as indexes of start and end column - by knowing such info, it is possible to issue any command against source and target cells.


Cool stuff ! Exactly my problem :wink:

I’ve just started to get this working quite simply with the ondrag event.

One “hic”, drag & dropping a cell works fine from one row to another, but nothing happens if i dnd on the same row.

Is there something (event, api) that can go around this ?

Many thanks,


By default grid prevents d-n-d on the same row ( because it has no sense in original d-n-d logic )
You can remove such blocking, by adding the next code

grid._drag_validate = false;