[CLOSED] Drag and Drop from Combobox to TreeGrid

  1. #1

    [CLOSED] Drag and Drop from Combobox to TreeGrid

    Hi,

    it is possible to drag and drop a combobox value into a treePanel?
    i dont want to write some custom logic, i want to use the existing plugins.

    the dd from Combobox to Content Panel is OK, but not from Combobox to Tree.

    best regards
    I.

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System" %>
    <%@ Import Namespace="System.Data.SqlClient" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Konsortialprojekt - Ext.NET</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <script runat="server">
    
            private object TestDataComboBox
            {
                get
                {
                    return new object[]
                    {
                        new object[] { "1", "Alabama", "The Heart of Dixie" },
                        new object[] { "2", "Alaska", "The Land of the Midnight Sun" },
                        new object[] { "3", "Arizona", "The Grand Canyon State" },
                        new object[] { "4", "Arkansas", "The Natural State" },
                        new object[] { "5", "California", "The Golden State" },
                    };
                }
            }
        </script>
    
        <script>
            var notifyDrop = function (dd, e, data) {
                var msg = [];
    
                msg.push("<p><b>Node</b></p><ul>");
                msg.push("<li>id : " + data.item.id + "</li>");
                msg.push("</ul>");
    
                Ext.get("drop-target").update(msg.join(""))
                return true;
            };
    
            var getDragData = function (e) {
                if (!this.ddel) {
                     this.ddel = document.createElement('div');
                }
                
                var target = Ext.get(e.getTarget());
                // Check Target is really a search-item
                if (!target.hasCls('search-item')) {
                    target = target.up("[class='search-item']");
                    if (target == null || !target.hasCls('search-item')) {
                        return false;
                    }
                }
                
                return {ddel:this.ddel, item:target};
            };
        
            var onInitDrag = function (e) {
                this.ddel.innerHTML = this.dragData.item.dom.innerHTML;
                this.ddel.className = this.dragData.item.dom.className;
                this.ddel.style.width = this.dragData.item.getWidth() + "px";
                this.proxy.update(this.ddel);
            };
            
            var getRepairXY = function (e, data) {
                data.item.highlight('#E8EDFF');
                return data.item.getXY();
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:DragZone runat="server" Target="={#{SupplierListConfig}.getEl()}" Group="SupplierSearchResult2Tree">
                <GetDragData Fn="getDragData" />
                <OnInitDrag Fn="onInitDrag" />
                <GetRepairXY Fn="getRepairXY" />
            </ext:DragZone>
    
            <ext:DropTarget runat="server" Target="drop-target" Group="SupplierSearchResult2Tree">
                <NotifyDrop Fn="notifyDrop" />
            </ext:DropTarget>
    
            <ext:Panel
                runat="server"
                Width="1024"
                Height="800"
                Layout="Border">
                <Items>
                    <ext:TreePanel
                        runat="server"
                        Region="West"
                        Split="true"
                        MarginSpec="5 0 5 5"
                        Width="350"
                        Title="Projects"
                        AutoScroll="true"
                        Collapsible="true"
                        RootVisible="false">
                        <Root>
                            <ext:Node Text="Composers" Expanded="true">
                                <Children>
                                    <ext:Node Text="Beethoven" Icon="UserGray" Expanded="true">
                                        <Children>
                                            <ext:Node Text="Concertos" Expanded="true">
                                                <Children>
                                                    <ext:Node Text="No. 1 - C" Icon="Music" Leaf="true" AllowDrop="true" />
                                                    <ext:Node Text="No. 2 - B-Flat Major" Icon="Music" Leaf="true" AllowDrop="true" />
                                                    <ext:Node Text="No. 3 - C Minor" Icon="Music" Leaf="true" AllowDrop="true" />
                                                    <ext:Node Text="No. 4 - G Major" Icon="Music" Leaf="true" AllowDrop="true" />
                                                    <ext:Node Text="No. 5 - E-Flat Major" Icon="Music" Leaf="true" AllowDrop="true" />
                                                </Children>
                                            </ext:Node>
                                        <Children>
                                    </ext:Node>
                                </Children>
                            </ext:Node>
                        </Root>
                        <View>
                            <ext:TreeView ID="ProjectTreeView" runat="server">
                                <Plugins>
                                    <ext:TreeViewDragDrop runat="server" DropGroup="SupplierSearchResult2Tree" AllowLeafDrop="true"/>
                                </Plugins>
                            </ext:TreeView>
                        </View>
                    </ext:TreePanel>
    
                    <ext:Panel
                        runat="server"
                        Region="Center"
                        Layout="Border"
                        MarginSpec="0 5 5 0">
                        <Items>
                            <ext:Panel
                                runat="server"
                                Title="Music"
                                Region="North"
                                Layout="AnchorLayout"
                                MarginSpec="5 0 0 0">
                                <Content>
                                    <ext:ComboBox
                                        runat="server"
                                        DisplayField="_DISPLAY"
                                        ValueField="_OBJID"
                                        TypeAhead="false"
                                        PageSize="25"
                                        HideTrigger="true"
                                        MinChars="0"
                                        TriggerAction="Query"
                                        AnchorHorizontal="100%"
                                        MarginSpec="5 5 5 5"
                                        Draggable="true">
                                        <ListConfig
                                            LoadingText="Searching..."
                                            ID="SupplierListConfig">
                                            <ItemTpl runat="server">
                                                <Html>
                                                    <div class="search-item" id="{_OBJID}" style="border: 1px dashed silver; padding: 5px 5px 5px 5px; border-radius: 5px;">
                                                        <b><span>{_DISPLAY}</span></b><br />
                                                        {Anzeige}
                                                    </div>
                                                </Html>
                                            </ItemTpl>
                                            
                                        </ListConfig>
                                        <Store>
                                            <ext:Store runat="server" Data="<%# TestDataComboBox %>" AutoDataBind="true">
                                                <Model>
                                                    <ext:Model runat="server">
                                                        <Fields>
                                                            <ext:ModelField Name="_OBJID" />
                                                            <ext:ModelField Name="_DISPLAY" />
                                                            <ext:ModelField Name="Anzeige" />
                                                        </Fields>
                                                    </ext:Model>
                                                </Model>
    
                                                <Reader>
                                                    <ext:ArrayReader />
                                                </Reader>
                                            </ext:Store>
                                        </Store>
                                    </ext:ComboBox>
                                </Content>
                            </ext:Panel>
    
                            <ext:Panel
                                runat="server"
                                Title="Properties"
                                Region="South"                            
                                Split="true"
                                AutoScroll="true"
                                MarginSpec="5 0 0 0"
                                height="300px">
                                <Content>
                                    <div id="drop-target" style="border: 1px silver solid; margin: 20px; padding: 8px; height: 140px">
                                        This works, TreePanel dont!
                                    </div>
                                </Content>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Sep 29, 2015 at 5:41 PM. Reason: [CLOSED]
  2. #2
    Hi @IMehl,

    the dd from Combobox to Content Panel is OK
    Hmm, I cannot get it working with the sample that you provided. I am testing with the latest Ext.NET from SVN trunk. Could you, please, clarify what is exactly point I should drag from? I tried a lot, but it looks nothing is draggable for me in the ComboBox area.

    but not from Combobox to Tree.
    Well, that is quite a different requirement comparing with dropping into a regular Panel's body. Please clarify what exactly place do you want to drop a ComboBox' text into a TreePanel? Where the dropped text should be applied to? Should it replace the node's text?

    i dont want to write some custom logic, i want to use the existing plugins.
    As far as I can remember there is no a specific plugin to be able dragging from a ComboBox and dropping to a TreePanel.

    Actually, I think your requirement is not a trivial one, but it is definitely possible to implement.

Similar Threads

  1. [CLOSED] [1.x] TreeGrid Drag Row Drop Row
    By MP in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 22, 2013, 2:02 PM
  2. [CLOSED] Drag Drop problem in TreeGrid
    By legaldiscovery in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 17, 2011, 9:22 AM
  3. [CLOSED] Not able to drag drop leaf to leaf in TreeGrid
    By legaldiscovery in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 15, 2011, 1:47 PM
  4. Replies: 0
    Last Post: Sep 27, 2010, 12:59 PM

Posting Permissions