[CLOSED] menu item drag and drop

**SymSure** · Apr 15, 2011, 5:13 PM

I want to be able to drag a menu item from the west panel and drop it in the Work Management Panel.

When the menu item is dropped on the work management panel a button similar to the button in the work management Panel is generated. I can handle the generation of the buttons. I am more interested in the chains of event to capture and how to handle it.

**Vladimir** · Apr 17, 2011, 12:27 PM

Hi,

Please see the following sample

<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!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 getDragData = function(e) {
            var t = e.getTarget(".x-menu-item");
            if (t) {
                e.stopEvent();

                var item = Ext.getCmp(t.id);
                var d = document.createElement("div");
                //d.className = "x-form-text";
                d.appendChild(document.createTextNode(item.text));
                //Ext.fly(d).setWidth(f.getEl().getWidth());
                return {
                    item: item,
                    ddel: d
                };
            }
        };

        var getRepairXY = function() {
            return this.dragData.item.getEl().getXY();
        };
        
        var notifyDrop = function (dd, e, data) {                        
            CenterPanel1.body.update(data.item.text);
            Ext.Msg.alert("Drop", "Menu item is droppped: " + data.item.text);
            return true;
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />        
          
        <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:MenuPanel ID="MenuPanel1" runat="server" Width="250" Region="West">
                    <Menu>
                        <Items>
                            <ext:MenuItem runat="server" Text="Item 1" />
                            <ext:MenuItem runat="server" Text="Item 2" />
                            <ext:MenuItem runat="server" Text="Item 3" />
                        </Items>
                    </Menu>
                </ext:MenuPanel>
                
                <ext:Panel ID="CenterPanel1" runat="server" Region="Center">
                </ext:Panel>
            </Items>
        </ext:Viewport>
        
        <ext:DragZone runat="server" Scroll="false" Target="={MenuPanel1.getEl()}" Group="menu-items">
            <GetDragData Fn="getDragData" />
            <GetRepairXY Fn="getRepairXY" />
        </ext:DragZone>
        
        <ext:DropTarget runat="server" Target="={CenterPanel1.body}" Group="menu-items">
            <NotifyDrop Fn="notifyDrop" />
        </ext:DropTarget>
    </form>
</body>
</html>

**SymSure** · Apr 18, 2011, 5:28 PM

[SIZE=3]Hi,
[SIZE=3] I sent a sample project to your team because the sample[SIZE=3] code you provided above does not fit my current scenario. For the following reason
[SIZE=3]
[SIZE=3]1. [SIZE=3]The accordion item in the navigator panel are created dynamically.
[SIZE=3]2. [SIZE=3]The drop location is embedded in an Iframe inside the a tab panel.
[SIZE=3]Please provide me a solution that will work with the sample project i have sent to you guys. The filename is symsure.zip. As I said I want to be able to drag the item from the navigator panel to the Work Management Panel (you need to run the code to see it).
[SIZE=3]

[SIZE=3] I cannot paste a code snippets here as that will be confussing that is why I have attached the sample project.
[SIZE=3]
[SIZE=3]Regards

**SymSure** · Apr 18, 2011, 5:31 PM

[SIZE=3]Hi,

I sent a sample project to your team because the solution code you provided above does not fit my current scenario. For the following reason

[SIZE=3]1. The accordion item in the navigator panel are created dynamically.
[SIZE=3]2. The drop location is embedded in an Iframe inside the a tab panel.
[SIZE=3]Please provide me a solution that will work with the sample project i have sent to you guys. The filename is symsure.zip. As I said I want to be able to drag the item from the navigator panel to the Work Management Panel (you need to run the code to see it)
[SIZE=3] I cannot paste a code snippets here as that will be confussing that is why I have attached the sample project. I have made effort to remove any unnessary parts of the project. Please let me know if you have further questions
[SIZE=3]Regards

**SymSure** · Apr 18, 2011, 5:32 PM

Hi,

I sent a sample project to your team because the solution code you provided above does not fit my current scenario. For the following reason

1. The accordion item in the navigator panel are created dynamically.
2. The drop location is embedded in an Iframe inside the a tab panel.
Please provide me a solution that will work with the sample project i have sent to you guys. The filename is symsure.zip. As I said I want to be able to drag the item from the navigator panel to the Work Management Panel (you need to run the code to see it)
I cannot paste a code snippets here as that will be confussing that is why I have attached the sample project. I have made effort to remove any unnessary parts of the project. Please let me know if you have further questions
Regards

**Vladimir** · Apr 18, 2011, 5:37 PM

Hi,

I sent a sample project to your team because the sample code you provided above does not fit my current scenario.

Please always describe all of your requirements in the thread instead just sending a sample

The accordion item in the navigator panel are created dynamically.

I am not sure why it is problem for you. Just create DragZone and DropTarget dynamically also

The drop location is embedded in an Iframe inside the a tab panel.

Drag/Drop operation cannot be performed to/outside iframe (browsers don't support it)

**SymSure** · Apr 18, 2011, 5:55 PM

Please always describe all of your requirements in the thread instead just sending a sample

I have described all my requirement in the thread. What other requirement do you need. What dont you understand?

I am not sure why it is problem for you. Just create DragZone and DropTarget dynamically also

Can you provide me with the code of creating the drop target and draggtartget dynamically and how to add it to the page. i am new to your product and there seem not to be any documentation. Please not the this is an MVC project
If you can just run the code I sent to you guys you can provide me a better help.

Drag/Drop operation cannot be performed to/outside iframe (browsers don't support it

the drop target is created in a tabpanel as shown below

 
<ext:TabPanel 
                ID="tpMain" 
                runat="server" 
                Region="Center" 
                Margins="0 0 4 0" 
                EnableTabScroll="true">
                <Items>
                    <ext:Panel 
                        ID="Tab1" 
                        runat="server" 
                        Title="Home" 
                        Icon="ApplicationForm" 
                        Border="false"> 
                        <AutoLoad 
                            Url="/Home/HomePanel/" 
                            Mode="IFrame" 
                            ShowMask="true" 
                            MaskMsg="Loading Panel..."
                            callback="ItemsRendered(response);"
                            MonitorComplete="True" />                       
                    </ext:Panel> 
 
                </Items>

as you can see it is an IFRAME . Are you saying that it is not possible to use it as a drop target?

regards

**SymSure** · Apr 18, 2011, 6:09 PM

"Error"

This is an MVC project.

**Vladimir** · Apr 18, 2011, 6:16 PM

Hi,

I have described all my requirement in the thread. What other requirement do you need. What dont you understand?

Your initial post doesn't contain those requirements are added in next posts (after my sample)

Can you provide me with the code of creating the drop target and draggtartget dynamically and how to add it to the page. i am new to your product and there seem not to be any documentation. Please not the this is an MVC project
If you can just run the code I sent to you guys you can provide me a better help.

The same way as you added accordion with MenuPanel, there is no difference how to create accordion, menupanel or drop zone

DragZone dragZone = new DragZone{...}; // initialize all required properties
response.Script = accordion.ToScript(RenderMode.AddTo, "westPanel") + dragZone.ToScript();

Are you saying that it is not possible to use it as a drop target?

Yes, drag&drop is not supported between page and iframe (or between iframes)

**SymSure** · Apr 18, 2011, 7:27 PM

Ok.
ignoring any other requirement. I believe the bottleneck we have here is that the page loaded ion the tab panel was loaded in an IFRAME.

Looking at the sample code I sent to you guys. Is there a better way to load the page in the home tab without using an IFRAME so that we can get the drag and drop to work. You guys are expert at this there should be a work around. I must not use an IFRAME for the home page. u have the source code could you make it to work

regards

Thread: [CLOSED] menu item drag and drop

Thread Tools

Search Thread

Display

[CLOSED] menu item drag and drop

Similar Threads

[RAZOR] Menu Panel , Menu , Menu item not working in ext.net 2.0

Drag Drop Not to Remove The Item In The Dragzone

[CLOSED] Always selected Item is nothing for combobox as menu item

[CLOSED] Menu inside Component menu item

[CLOSED] MultiSelect with drag and drop, Drop listener

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] menu item drag and drop

[CLOSED] menu item drag and drop

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us