ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: Jignesh on July 03, 2020, 02:16:47 pm

Title: Multiple rows drag and drop
Post by: Jignesh on July 03, 2020, 02:16:47 pm

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

Title: Re: Multiple rows drag and drop
Post by: paramvir on July 03, 2020, 06:26:26 pm

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();
                }
            },


Title: Re: Multiple rows drag and drop
Post by: Jignesh on July 17, 2020, 05:52:10 pm

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

Title: Re: Multiple rows drag and drop
Post by: paramvir on July 20, 2020, 09:17:38 am

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 ];
                }
            },


Title: Re: Multiple rows drag and drop
Post by: mikep on September 15, 2020, 02:23:42 am

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?

Title: Re: Multiple rows drag and drop
Post by: paramvir on September 15, 2020, 05:17:45 pm

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 ];
}
},