CODEWITHSUNDEEP
javascriptesridgriddstore
psl
psl

Reputation: 101

Dragging rows outside of grid clears grid on drop

Version info: dgrid 1.1.0
Example site: http://wab-preinspection-test.s3-website-us-west-2.amazonaws.com/

Problem:
When dragging rows outside of a grid, and then dropping within the grid, the grid is cleared.

Possible cause:

drag and drop css classes are assigned twice.

The drag-and-drop example from the laboratory shows dnd classes assigned once at the dgrid-scroller level: 

<div class="dgrid-scroller dojoDndSource dojoDndTarget dojoDndContainer" style="user-select: none; margin-top: 25px; margin-bottom: 0px;">

Whereas dnd classes are assigned twice in my code:

<div id="grid" class="dgrid dgrid-grid ui-widget dojoDndTarget dojoDndContainer" role="grid">    
<div class="dgrid-scroller dojoDndSource dojoDndTarget dojoDndContainer" style="user-select: none; margin-top: 34px; margin-bottom: 0px;">

Code

grid properties:

        function createGrid(){
            dGrid = declare([Grid,DnD,Selection,ColumnResizer])

            //basic grid properties
            grid = new dGrid({
                bufferRows: 2000,
                farOffRemoval: 600000,
                keepScrollPosition: true,
                minRowsPerPage: 2000,
                maxRowsPerPage: 5000
            },'grid'); 
        }

Source Properties:

        //create target for Drag and Drop events            
        function createTarget(){

            target = new DnDSource('grid', {
                accept: ['dgrid-row'],
                delay: 2,
                isSource: false
                }
            });
        }

Drop Event:

         //listen for drop
        DnDevent = dojo.connect(target,"onDndDrop", function(){

            //update grid with new order
            newId = 1
            array.forEach(grid.collection.data, function(item){

                changedSequence[item.OBJECTID] = {"Order":newId}

                item.NewSequence = newId

                newId += 1
            })

            //reload the grid to show changes
            setTimeout( function(){ grid.refresh({ keepScrollPosition: true })} ,500)

Upvotes: 0

Views: 255

Answers (0)

Related Questions