Devextreme-angular: Use Drag and Drop with the angular2 DxDataGrid

[bonejon]

Hi,

We are using 16.1 of the devextreme suite and would like to use drag drop to reorder rows within the DxDataGrid. The following example from your site shows this using knockout, how would we achieve the same behaviour with angular2?

https://www.devexpress.com/Support/Center/Example/Details/T152596

Thanks, Jon.

[nileshdudhal]

Hello,

I am following on the question raised above, could you please clarify regarding the angular support?

We're fully licensed users of DevExpress Angular (2) widgets and would appreciate a prompt response on this query as we were advised by the DevExpress support team to raise this query here.

Thanks
Nilesh

[GoshaFighten]

The approach mentioned in the ticket does not depend on the approach you are using to create our widgets. The main idea is to create a data source that will have a field against which records will be sorted. Then, the jQuery UI draggable and droppable widgets are applied to a grid row. When you drop a grid row to another row, the field used to sort rows is updated. As a result, the grid updates its row indexes according to that field.
 
I've prepared the Plunker to illustrate this.

[nileshdudhal]

Hi GoshaFighten,

The plunker example has jQuery function (initDragging($gridElement: JQuery)) which works directly with the DOM to reorder when items are dragged up/down. Is there a pure Angular2/TypeScript way of doing this without using jQuery?

Thanks
Nilesh

[GoshaFighten]

@nileshdudhal
I'm not sure. I suggest you google for such existing libraries or create your own.