Multiple rows drag and drop

[Jignesh]

Hi Paramvir,

How we will drag and drop multiple rows at a single time.

Can you please give me demo example for below URL:
https://paramquery.com/pro/demos/dnd_grid

I want 1 to 5 and 6,10 rows to drag and drop.

Thank you

[paramvir]

First we add a checkbox column to check multiple rows.

Code: [Select]

{
dataIndx: "state",
maxWidth: 30,
minWidth: 30,
align: "center",
resizable: false,
title: "",
menuIcon: false,
type: 'checkbox',
sortable: false,
editor: false,
dataType: 'bool'
},

Then implement dragModel.dragNodes to return checked rows.

Code: [Select]

            dragModel:{
                on: true,
                diHelper:['OrderID'],
dragNodes: function(rd, evt){               
                    return this.Checkbox('state').getCheckedNodes();
                }
            },


[Jignesh]

Hi Paramvir,

This code only work for multiple row drga nad drop but if user want to single row drag and drop without select checkbox then how we will reach this functionality.

Below steps:
1) Select multiple rows then drag and drop. It's work perfectly.
Query ) After drop I want to remove selected checkbox.

2) If user want to drag and drop single row so currently I am selecting single row then drag and drop.
Query ) How to drag and drop single row without select checkbox.



Thank you,
Jignesh

[paramvir]

1. Use moveNode event to clear checkboxes.

Code: [Select]

moveNode: function(){
this.Checkbox('state').unCheckAll();
},

2. Update dragModel.dragNodes

Code: [Select]

            dragModel:{
                on: true,
                diHelper:['OrderID'],
dragNodes: function(rd, evt){               
                    var checkNodes = this.Checkbox('state').getCheckedNodes();
    return (checkNodes.length && checkNodes.indexOf(rd)>-1 )? checkNodes: [ rd ];
                }
            },


[mikep]

I'm already using a checkbox in my grid. Is there another alternative for multi-select for the drag/drop? Can I shift/click to select multiple rows?

[paramvir]

yes row selections can also be used instead of checkboxes for multi rows drag n drop by doing these 2 changes in selectionModel and dragModel.dragNodes

Code: [Select]

selectionModel: {type:'row'},


Code: [Select]

dragModel:{
        on: true,
        diHelper:['OrderID'],
dragNodes: function(rd, evt){
var arr = this.SelectRow().getSelection().map(function(obj){
return obj.rowData;
});
return (arr.length && arr.indexOf(rd) > -1 )? arr: [ rd ];
}
},