Drag and Drop Girdpanel to Gridpanel

  1. #1

    Drag and Drop Gridpanel to Gridpanel

    Hi,
    I've got a working example of draging and dropping from gridpanel to gridpanel, but instead of just two, I've added a third. My issue is that I can't drag from gridpanel 2 to gridpanel 3, and vice versa. I first have to drag the records back to the gridpanel1 first. I don't want to use the treeview version either. Here's my code, how do I modify this to achieve the above? Thanks.

    Code Behind:
    
    protected void Page_Load(object sender, EventArgs e)
            {
                List<object> data = new List<object>();
    
                for (int i = 0; i < 10; i++)
                {
                    data.Add(new
                    {
                        Tenant = "Rec " + i,
                        Reference = i.ToString(),
                        Total = i.ToString()
                    });
                }
    
                this.Store1.DataSource = data;
                this.Store1.DataBind();
    
            }
    
    Markup:
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            // Generic function to add records.
            var addRow = function (store, record, ddSource) {
                // Search for duplicates
                var foundItem = store.findExact('Tenant', record.data.Tenant);
    
                // if not found
                if (foundItem == -1) {
                    //Remove Record from the source
                    ddSource.grid.store.remove(record);
    
                    store.add(record);
    
                    // Call a sort dynamically
                    store.sort('Tenant', 'ASC');
                }
            };
    
            var notifyDrop1 = function (ddSource, e, data) {
                // Loop through the selections
                Ext.each(ddSource.dragData.selections, function (record) {
                    addRow(Store1, record, ddSource);
                });
    
                return true;
            };
    
            var notifyDrop2 = function (ddSource, e, data) {
                // Loop through the selections
                Ext.each(ddSource.dragData.selections, function (record) {
                    addRow(Store2, record, ddSource);
                });
    
                return true;
            };
    
            var notifyDrop3 = function (ddSource, e, data) {
                // Loop through the selections
                Ext.each(ddSource.dragData.selections, function (record) {
                    addRow(Store3, record, ddSource);
                });
    
                return true;
            };
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
         <h1 style="font-size: x-large">Rent Demand Drag and Drop</h1>        
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:JsonReader>
                        <Fields>
                            <ext:RecordField Name="Tenant" />
                            <ext:RecordField Name="Reference" />
                            <ext:RecordField Name="Total" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            
            <ext:Store ID="Store2" runat="server">
                <Reader>
                    <ext:JsonReader>
                        <Fields>
                            <ext:RecordField Name="Tenant" />
                            <ext:RecordField Name="Reference" />
                            <ext:RecordField Name="Total" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
    
            <ext:Store ID="Store3" runat="server">
                <Reader>
                    <ext:JsonReader>
                        <Fields>
                            <ext:RecordField Name="Tenant" />
                            <ext:RecordField Name="Reference" />
                            <ext:RecordField Name="Total" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            
            <ext:Panel ID="Panel1" runat="server" Width="950" Height="300">
                <Items>
                    <ext:BorderLayout ID="BorderLayout1" runat="server">
                        <West MarginsSummary="5 5 5 5">
                            <ext:GridPanel 
                                ID="GridPanel1" 
                                runat="server" 
                                DDGroup="secondGridDDGroup"
                                StoreID="Store1"
                                EnableDragDrop="true"
                                StripeRows="true"
                                AutoExpandColumn="Tenant"
                                Width="325"
                                Title="Today's Rent Demands">
                                <ColumnModel>
                                    <Columns>
                                        <ext:Column ColumnID="Tenant" Header="Record Name" Width="160" DataIndex="Tenant" />
                                        <ext:Column Header="Reference" Width="60" DataIndex="Reference" />
                                        <ext:Column Header="Total" Width="60" DataIndex="Total" />
                                    </Columns>
                                </ColumnModel>
                                <SelectionModel>
                                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                                </SelectionModel>
                            </ext:GridPanel>
                        </West>
                        
                        <Center MarginsSummary="5 5 5 0">
                            <ext:GridPanel 
                                ID="GridPanel2" 
                                runat="server" 
                                DDGroup="firstGridDDGroup"
                                StoreID="Store2"
                                EnableDragDrop="true"
                                StripeRows="true"
                                AutoExpandColumn="Tenant"
                                Width="325"
                                Title="Receipt and Pay">
                                <ColumnModel>
                                    <Columns>
                                        <ext:Column ColumnID="Tenant" Header="Record Name" Width="160" DataIndex="Tenant" />
                                        <ext:Column Header="Reference" Width="60" DataIndex="Reference" />
                                        <ext:Column Header="Total" Width="60" DataIndex="Total" />
                                    </Columns>
                                </ColumnModel>
                                <SelectionModel>
                                    <ext:RowSelectionModel ID="RowSelectionModel2" runat="server" />
                                </SelectionModel>
                            </ext:GridPanel>
                        </Center>
                        <East MarginsSummary="5 5 5 0">
                            <ext:GridPanel 
                                ID="GridPanel3" 
                                runat="server" 
                                DDGroup="firstGridDDGroup"
                                StoreID="Store3"
                                EnableDragDrop="true"
                                StripeRows="true"
                                AutoExpandColumn="Tenant"
                                Width="325"
                                Title="Receipt Only">
                                <ColumnModel>
                                    <Columns>
                                        <ext:Column ColumnID="Tenant" Header="Record Name" Width="160" DataIndex="Tenant" />
                                        <ext:Column Header="Reference" Width="60" DataIndex="Reference" />
                                        <ext:Column Header="Total" Width="60" DataIndex="Total" />
                                    </Columns>
                                </ColumnModel>
                                <SelectionModel>
                                    <ext:RowSelectionModel ID="RowSelectionModel3" runat="server" />
                                </SelectionModel>
                            </ext:GridPanel>
                        </East>
                    </ext:BorderLayout>
                </Items>
                
                <BottomBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                            <ext:Button ID="Button1" runat="server" Text="Reset">
                                <Listeners>
                                    <Click Handler="Store1.loadData(Store1.proxy.data); Store2.removeAll(); Store3.removeAll();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:Panel> 
            
            <ext:DropTarget ID="DropTarget1" runat="server" Target="={GridPanel1.view.scroller.dom}" Group="firstGridDDGroup">
                <NotifyDrop Fn="notifyDrop1" />
            </ext:DropTarget>       
            
            <ext:DropTarget ID="DropTarget2" runat="server" Target="={GridPanel2.view.scroller.dom}" Group="secondGridDDGroup">
                <NotifyDrop Fn="notifyDrop2" />
            </ext:DropTarget>
            
            <ext:DropTarget ID="DropTarget3" runat="server" Target="={GridPanel3.view.scroller.dom}" Group="secondGridDDGroup">
                <NotifyDrop Fn="notifyDrop3" />
            </ext:DropTarget>  
    
        </form>
    </body>
    </html>
    Last edited by Kev; Jun 15, 2012 at 2:35 PM.
  2. #2
    I've managed to solve this. Just added three extra drop targets to accomodate additional drops:

    <ext:DropTarget ID="DropTarget1" runat="server" Target="={GridPanel2.view.scroller.dom}" Group="firstGridDDGroup">
                <NotifyDrop Fn="notifyDrop2" />
            </ext:DropTarget>       
            
            <ext:DropTarget ID="DropTarget2" runat="server" Target="={GridPanel3.view.scroller.dom}" Group="firstGridDDGroup">
                <NotifyDrop Fn="notifyDrop3" />
            </ext:DropTarget>
            
            <ext:DropTarget ID="DropTarget3" runat="server" Target="={GridPanel1.view.scroller.dom}" Group="secondGridDDGroup">
                <NotifyDrop Fn="notifyDrop1" />
            </ext:DropTarget>  
    
            <ext:DropTarget ID="DropTarget4" runat="server" Target="={GridPanel3.view.scroller.dom}" Group="secondGridDDGroup">
                <NotifyDrop Fn="notifyDrop3" />
            </ext:DropTarget>       
            
            <ext:DropTarget ID="DropTarget5" runat="server" Target="={GridPanel1.view.scroller.dom}" Group="thirdGridDDGroup">
                <NotifyDrop Fn="notifyDrop1" />
            </ext:DropTarget>
            
            <ext:DropTarget ID="DropTarget6" runat="server" Target="={GridPanel2.view.scroller.dom}" Group="thirdGridDDGroup">
                <NotifyDrop Fn="notifyDrop2" />
            </ext:DropTarget>
    Last edited by Daniil; Jun 18, 2012 at 10:11 PM. Reason: Please use [CODE] tags

Similar Threads

  1. Drag-drop Gridpanel
    By johny_bravo in forum 1.x Help
    Replies: 0
    Last Post: Mar 25, 2011, 5:37 PM
  2. [CLOSED] GridPanel: Drag and Drop
    By RomualdAwessou in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Aug 11, 2010, 12:00 PM
  3. Drag & Drop Between GridPanel and Form
    By SilverSeva in forum 1.x Help
    Replies: 0
    Last Post: Jul 22, 2009, 10:06 AM
  4. GridPanel drag and drop
    By davidhoyt in forum 1.x Help
    Replies: 5
    Last Post: Oct 13, 2008, 3:40 PM

Tags for this Thread

Posting Permissions