Results 1 to 8 of 8

Thread: Drag Drop of same item from one Grid to another

  1. #1

    Default Drag Drop of same item from one Grid to another

    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?

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    Are you using the gridviewdragdrop plugin? Also, what version of Ext are you using?

  3. #3

    Default

    Quote Originally Posted by slemmon View Post
    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

  4. #4
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    Can you provide an example of your code to reproduce the issue?

  5. #5

    Default


    // 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 ...

  6. #6

    Default

    please let me know any updates in this issue.

  7. #7
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    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).

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

  8. #8

    Default

    Thank you.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •