[CLOSED] Getting drag source MultiSelect when dragging item from MultiSelect to MultiSelect

  1. #1

    [CLOSED] Getting drag source MultiSelect when dragging item from MultiSelect to MultiSelect

    We have a page that allows a user to drag an item from one MultiSelect component to another MultiSelect component. The source MultiSelect and the target MultiSelect both need to be updated after the drag/drop action, but there doesn't seem to be a way to get the original parent for the item in the AfterDrop event of the target MultiSelect. Is there a method that can be used to accomplish this task?

    Thanks....
    Last edited by Daniil; May 09, 2012 at 9:31 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I can suggest the following solution, please see the AfterDrop listeners.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.MultiSelect1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "1", "item1" },
                    new object[] { "2", "item2" },
                    new object[] { "3", "item3" }
                };
                store.DataBind();
    
                store = this.MultiSelect2.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "4", "item4" },
                    new object[] { "5", "item5" },
                    new object[] { "6", "item6" }
                };
                store.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <script type="text/javascript">
            var onAfterDrop = function (view, node, dd, e, data) {
                var target = this,
                    source = data.sourceView.ownerCt.initialConfig.renderTo.id;
                                        
                source = source.substr(0, source.indexOf('_Container'));
                source = Ext.getCmp(source);
                                    
                console.log(String.format('source id: {0}; target id: {1}', target.id, source.id));
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        
        <ext:MultiSelect 
            ID="MultiSelect1" 
            runat="server" 
            DragGroup="group1" 
            DropGroup="group2">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="value" />
                                <ext:RecordField Name="text" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <Listeners>
                <AfterDrop Fn="onAfterDrop" />
            </Listeners>
        </ext:MultiSelect>
        <ext:MultiSelect 
            ID="MultiSelect2" 
            runat="server" 
            DropGroup="group1" 
            DragGroup="group2">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="value" />
                                <ext:RecordField Name="text" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <Listeners>
                <AfterDrop Fn="onAfterDrop" />
            </Listeners>
        </ext:MultiSelect>
    </body>
    </html>
  3. #3
    Excellent, straightforward example, Daniil. I'm wondering if the same data is available to the AfterDrop DirectEvent in code-behind?

    Thanks,

    Jason
  4. #4
    Quote Originally Posted by jwaite View Post
    I'm wondering if the same data is available to the AfterDrop DirectEvent in code-behind?
    Well, none of any listener arguments are automatically passed to DirectEvent handler. You should pass required arguments manually via DirectEvent ExtraParams.
  5. #5
    That turned on a light bulb for me, Daniil. Thanks for the help!

    Best,

    Jason

Similar Threads

  1. Replies: 4
    Last Post: Feb 20, 2012, 11:14 AM
  2. Replies: 0
    Last Post: Mar 09, 2010, 7:28 AM
  3. [CLOSED] Multiselect Drag and Drop
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 01, 2009, 12:51 PM
  4. Drag from Tree to Multiselect
    By rthiney in forum 1.x Help
    Replies: 0
    Last Post: Jul 17, 2009, 10:20 AM
  5. [CLOSED] MultiSelect Item CSS
    By Tbaseflug in forum 1.x Help
    Replies: 3
    Last Post: Apr 01, 2009, 7:42 AM

Tags for this Thread

Posting Permissions