dgrid dnd implement onDrop event

Question

I would like to implement a custom behavior of the drop event of DnD in dgrid. I have the following gdrig declaration:

this.grid = new (declare([OnDemandGrid, Editor, DnD, DijitRegistry]))({
                        region: "center",
                        collection: this.store,
                        selectionMode: 'single',
                        columns: ...
                    }, this.gridNode);

                    this.grid.startup();

What I exactly want is simple: after I drag and drop a row in the grid (reorder the items in dgrid) I want to trigger an event (function - say to get the current row and manipulate it, etc.). The problem is that I do not know how to override the onDrop event or drag event. Can someone give me a hint.

score 0 · Answer 1 · edited May 23 '17 at 12:17

There is an easy mechanism to replace onDrop, however it is not at all obvious how to keep but extend the existing onDrop functionality. This is because onDrop lives in a class called DnDSource which the grid creates. Fortunately this is a dependency that can be injected (via a property called dndConstructor). Here's my solution:

var MyDnDSource = declare([DnDSource], {
    onDrop: function() {
        this.inherited(arguments); // This is the original onDrop functionality
        console.log('This is my additional onDrop functionality');        
  }
});

this.grid = new (declare([OnDemandGrid, Editor, DnD, DijitRegistry]))({
                    dndConstructor: MyDnDSource,
                    region: "center",
                    collection: this.store,
                    selectionMode: 'single',
                    columns: ...
                }, this.gridNode);

this.grid.startup();

dgrid dnd implement onDrop event

1 Answers1