Results 1 to 8 of 8

Thread: [CLOSED] Multiselection Treepanel Drag Drop Extension

  1. #1
    Member
    Join Date
    Jan 2010
    Posts
    22

    [CLOSED] Multiselection Treepanel Drag Drop Extension

    Is there anyway to use this extension with the coolite treepanel server side control?

    http://www.sencha.com/forum/showthre...-Drag-and-Drop

    I tried including the javascript and setting the BaseCls on the treepanel but it does not work.

    Thanks,

    Frank
    Last edited by geoffrey.mcgill; Sep 17, 2010 at 5:19 PM. Reason: [CLOSED]

  2. #2
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,148
    Hello!

    Please clarify how exactly do you try to use this extension?

    This code works fine. It just needs to add MultiSelectTree-1.1.js to a solution's folder or set a respective url.

    Example
    Code:
    <%@ 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>
        <ext:ResourcePlaceHolder runat="server" />
    
        <script type="text/javascript" src="MultiSelectTree-1.1.js"></script>
    
        <script type="text/javascript">
            Ext.onReady(function() {
                var tree = 
                    new Ext.ux.MultiSelectTreePanel({
                        autoScroll: true,
                        width: 400,
                        height: 500,
                        animate: true,
                        containerScroll: true,
                        renderTo: Ext.getBody(),
                        ddGroup: 'tree1',
                        enableDD: true, 
                        rootVisible: false,
                        loader: new Ext.tree.TreeLoader(),
                        root: new Ext.tree.AsyncTreeNode({
                            expanded: true,
                            children: 
                                [{
                                    text: 'Menu 1',
                                    expanded: true,
                                    children: [
                                        {
                                            text: 'Option 1.1',
                                            leaf: true
                                        },
                                        {
                                            text: 'Option 1.2',
                                            leaf: true
                                        },
                                        {
                                            text: 'Option 1.3',
                                            leaf: true
                                        }
                                    ]},
                                 {
                                    text: 'Menu 2',
                                    expanded: true,
                                    children: [
                                        {
                                            text: 'Option 2.1',
                                            leaf: true
                                        },
                                        {
                                            text: 'Option 2.2',
                                            leaf: true
                                        },
                                        {
                                            text: 'Option 2.3',
                                            leaf: true
                                        }
                                    ]}
                                ]
                        })
                    });
            });
        </script>
    
        <style type="text/css">
            .x-dd-drag-ghost .x-tree-node-indent, .x-dd-drag-ghost .x-tree-ec-icon {
                display: inline !important;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        </form>
    </body>
    </html>
    P.S. I downloaded MultiSelectTree-1.1.js from
    http://www.users.on.net/~clear/ext/MultiSelectTree-1.1.js
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  3. #3
    Member
    Join Date
    Jan 2010
    Posts
    22
    I am looking to apply the extension to the Ext.Net Server Control. Is there anyway to change the xtype that server control renders to use this extension instead of the base xtype it is using? What i really want is to have two treepanel server controls on a page and allow multiple drap/drop between them.

  4. #4
    Ext.NET - Dev Team Vladimir's Avatar
    Join Date
    Mar 2008
    Location
    Russia
    Posts
    15,332
    Hi,

    You can create own custom control which inherited from TreePanel
    That extension for ExtJS 2.2 therefore custom class for Coolite 0.8.x
    Code:
    [Xtype("multiselecttreepanel")]
    [InstanceOf(ClassName = "Ext.ux.MultiSelectTreePanel")]
    public class MultiSelectTreePanel: TreePanel
    {        
    }
    Vladimir Shcheglov
    Ext.NET, Inc.
    Development Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  5. #5
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,148
    Hi alexkay,

    The MultiSelectTreePanel extension works fine in the Ext.Net too.

    Just download the latest version of .js here
    http://www.users.on.net/~clear/ext/MultiSelectTree-1.1.js

    A custom control for Ext.Net 1.0 can look like this:

    MultiSelectTreePanel.cs

    Code:
    using System;
    using System.Collections.Generic;
    using Ext.Net;
    
    namespace CustomControls
    {
        public class MultiSelectTreePanel : TreePanel
        {
            public override string InstanceOf
            {
                get
                {
                    return "Ext.ux.MultiSelectTreePanel";
                }
            }
    
            public override string XType
            {
                get
                {
                    return "multiselecttreepanel";
                }
            }
    
            protected override List<ResourceItem> Resources
            {
                get
                {
                    // override it to avoid manually placing resources at a page 
                    return base.Resources;
                }
            }
        }
    }
    Test .aspx page
    Code:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Assembly="Work" Namespace="CustomControls" TagPrefix="cc" %>
    
    <!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>
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    
        <script type="text/javascript" src="CustomControls/MultiSelectTreePanel/MultiSelectTree-1.1.js"></script>
    
        <style type="text/css">
            .x-dd-drag-ghost .x-tree-node-indent, .x-dd-drag-ghost .x-tree-ec-icon {
                display: inline !important;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <cc:MultiSelectTreePanel runat="server" Height="300" EnableDD="true">
            <Root>
                <ext:TreeNode Text="Composers" Expanded="true">
                    <Nodes>
                        <ext:TreeNode Text="Beethoven" Expanded="true">
                            <Nodes>
                                <ext:TreeNode Text="Concertos" Expanded="true">
                                    <Nodes>
                                        <ext:TreeNode Text="Concert 1" />
                                        <ext:TreeNode Text="Concert 2" />
                                    </Nodes>
                                </ext:TreeNode>
                            </Nodes>
                        </ext:TreeNode>
                    </Nodes>
                </ext:TreeNode>
            </Root>
        </cc:MultiSelectTreePanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Sep 30, 2010 at 7:07 PM.
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  6. #6
    Member
    Join Date
    Oct 2010
    Posts
    12
    I try to make a custom control follow you guild,but i've got a script exception like this:
    this.root is null or not a reference in ext.axd. renderRoot:function(){this.root.render();...}
    The ext.net version is 1.0rc1
    Hope to get u reply

  7. #7
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,148
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  8. #8
    Member
    Join Date
    Oct 2010
    Posts
    12
    Quote Originally Posted by Daniil View Post
    wow,thank you,it solved!

Similar Threads

  1. Drag Drop events in TreePanel
    By web4u in forum 2.x Help
    Replies: 0
    Last Post: Aug 08, 2012, 6:31 AM
  2. TreePanel - Drag & Drop
    By jigpatel06 in forum 1.x Help
    Replies: 0
    Last Post: Oct 19, 2010, 10:31 AM
  3. [CLOSED] [1.0] - MVC - TreePanel Drag-Drop DirectEvents
    By drkoh in forum 1.x Premium Help
    Replies: 4
    Last Post: Jul 22, 2010, 3:11 PM
  4. Drag and drop from GridPanel to TreePanel
    By jchau in forum Feature Requests
    Replies: 5
    Last Post: Jun 04, 2010, 12:02 PM
  5. [CLOSED] TreePanel Drag and Drop
    By davidhoyt in forum 1.x Premium Help
    Replies: 3
    Last Post: Jan 28, 2009, 5:24 AM

Tags for this Thread

Posting Permissions