PDA

View Full Version : Drag Drop of same item from one Grid to another



mreenareddy
26 Apr 2013, 1:15 AM
Hi All,

I have two grids: FirstGrid and SecondGrid. I'm trying to add items (rows) from first grid to second grid one by one.

1. Added Item1 from first to second.
2. Added Item2 from first to second.
3. Tried adding Item2 from first to second after Item2 of second grid. But not able to drop in second grid.
4. Tried adding Item2 from first to second before Item1 - successfully added.

I'm trying to handle 3rd point here, but not able to figure out.

Could anyone help me with this?

slemmon
29 Apr 2013, 1:16 PM
Are you using the gridviewdragdrop plugin? Also, what version of Ext are you using?

mreenareddy
5 May 2013, 11:15 PM
Are you using the gridviewdragdrop plugin? Also, what version of Ext are you using?


Yes, I'm using gridviewdragdrop

Version am using is : ext-4.0.7-gpl

slemmon
6 May 2013, 8:49 PM
Can you provide an example of your code to reproduce the issue?

mreenareddy
10 May 2013, 1:51 AM
// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
multiSelect: true,
columnLines: true,
width: 470,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'firstGridDDGroup'
}
},
store : firstGridStore,
columns : columns,
stripeRows : true,
title : 'Available Products&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=red>multi-select and drag to right grid...</font>',
margins : '0 2 0 0'
});

// create the destination Grid
var secondGrid = Ext.create('Ext.grid.Panel', {
//multiSelect: true,
selModel: selModel,
columnLines: true,
autoScroll: true,
flex: 1,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'secondGridDDGroup',
dropGroup: 'firstGridDDGroup',
enableDrag: false
},
listeners: {
beforedrop: function(node, data, dropRec, dropPosition,dropfunction) {
// making the default qty to 0.01 for all products except for kits

var dupflag = validateDuplicates(data);

var i=0;
for (; i < data.records.length; i++) {
if(data.records[i].get('QTY') == 0){
data.records[i].set('QTY',0.01);
}
}
if(dupflag == -1){
secondGridStore.add(data.records); //loadData(data.records,true);
}else{
alert('You are trying to add duplicate Product. Please Click Save before adding duplicates or continue adding other Product');
//return;
}
firstGrid.getSelectionModel().deselectAll();
return false;
}
}
},
store : secondGridStore,
columns : columns2,
stripeRows : true,
title : 'Selected Products',
margins : '0 0 0 3',
//selType: 'rowmodel',
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
dockedItems: [{
xtype: 'toolbar',
items: [{
itemId: 'removeButton',
text:'Remove Checked Products',
tooltip:'Remove Checked Products',
iconCls:'remove',
disabled: true,
handler: removeSelected
}]
}]
});

This is snippet of my implementation, please let me know if you require more ...

mreenareddy
23 May 2013, 1:00 AM
please let me know any updates in this issue.

slemmon
23 May 2013, 1:40 PM
I was hoping you might have an inclusive example that would show the issue. For example, the below example works using your plugin configs for the grid views when tested on 4.2.1 (released GA today).



Ext.define("KitchenSink.model.dd.Simple", {extend: Ext.data.Model,fields: ["name", "column1", "column2"]});




Ext.define('KitchenSink.view.dd.GridToGrid', {
extend: 'Ext.container.Container',

requires: [
'Ext.grid.*',
'Ext.layout.container.HBox',
'KitchenSink.model.dd.Simple'
],
xtype: 'dd-grid-to-grid',


width: 650,
height: 300,
layout: {
type: 'hbox',
align: 'stretch',
padding: 5
},

myData: [
{ name : 'Rec 0', column1 : '0', column2 : '0' },
{ name : 'Rec 1', column1 : '1', column2 : '1' },
{ name : 'Rec 2', column1 : '2', column2 : '2' },
{ name : 'Rec 3', column1 : '3', column2 : '3' },
{ name : 'Rec 4', column1 : '4', column2 : '4' },
{ name : 'Rec 5', column1 : '5', column2 : '5' },
{ name : 'Rec 6', column1 : '6', column2 : '6' },
{ name : 'Rec 7', column1 : '7', column2 : '7' },
{ name : 'Rec 8', column1 : '8', column2 : '8' },
{ name : 'Rec 9', column1 : '9', column2 : '9' }
],

initComponent: function(){
var group1 = this.id + 'group1',
group2 = this.id + 'group2',
columns = [{
text: 'Record Name',
flex: 1,
sortable: true,
dataIndex: 'name'
}, {
text: 'column1',
width: 80,
sortable: true,
dataIndex: 'column1'
}, {
text: 'column2',
width: 80,
sortable: true,
dataIndex: 'column2'
}];

this.items = [{
itemId: 'grid1',
flex: 1,
xtype: 'grid',
multiSelect: true,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'firstGridDDGroup'
}
},
store: new Ext.data.Store({
model: KitchenSink.model.dd.Simple,
data: this.myData
}),
columns: columns,
stripeRows: true,
title: 'First Grid',
tools: [{
type: 'refresh',
tooltip: 'Reset both grids',
scope: this,
handler: this.onResetClick
}],
margins: '0 5 0 0'
}, {
itemId: 'grid2',
flex: 1,
xtype: 'grid',
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'secondGridDDGroup',
dropGroup: 'firstGridDDGroup',
enableDrag: false
}
},
store: new Ext.data.Store({
model: KitchenSink.model.dd.Simple
}),
columns: columns,
stripeRows: true,
title: 'Second Grid'
}];


this.callParent();
},

onResetClick: function(){
//refresh source grid
this.down('#grid1').getStore().loadData(this.myData);


//purge destination grid
this.down('#grid2').getStore().removeAll();
}
});

mreenareddy
4 Jun 2013, 4:11 AM
Thank you.