Hello,
I was testing drag&drop from '
https://paramquery.com/pro/demos/dnd_grids' demo.
I have changed javascript and html a little as below.
Javascript
//first grid.
$("#dndgrid1").pqGrid({
height: 500,
width: '45%',
colModel: $.extend(true, [], columns),
dataModel: $.extend(true, {}, dataModel),
complete: function () {
this.flex();
},
dragModel:{
on: true,
//clsDnD: 'dnd1', <-- Annotation
diHelper:['OrderID']
},
dropModel:{
on: true,
// accept: '.dnd2' <-- Annotation
},
//pageModel: { type: 'local', rPP: 20, rPPOptions: [1, 10, 20, 30, 40, 50, 100] },
title: "Shipping Orders"
});
//2nd grid
$("#dndgrid2").pqGrid({
height: 500,
width: '45%',
colModel: $.extend(true, [], columns),
dataModel: $.extend(true, {}, dataModel),
complete: function () {
this.flex();
},
dragModel:{
on: true,
//clsDnD: 'dnd2', <-- Annotation
diHelper:['OrderID']
},
dropModel:{
on: true,
//accept: '.dnd1' <-- Annotation
},
//pageModel: { type: 'local', rPP: 20, rPPOptions: [1, 10, 20, 30, 40, 50, 100] },
title: "Shipping Orders"
});
HTML
<div id="dndgrid1" style="margin:auto;float:left;"></div>
<div style="margin:auto;width:10%;float:left;"> </div>
<div id="dndgrid2" style="margin:auto;float:left;
left:-10%;"></div>
<div style="clear:left;"></div>
Now two grids are overlayed.
When I drag&drop in the right grid to switch rows, that row is also added to the left grid's tow row.
I don't know what makes the effect to the other grid when they are overlay.
Is there some option to prevent that?
