error with qsf:configuratorpanel

[Zeus_developer]

Hi,

when I copy the telerik demo of treeview to my web project, it thrown an error with the configurator panel, it doesn't recognize this tag:

<qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Expanded="true">

this is the error:

Protected WithEvents ConfigurationPanel1 As Global.Telerik.QuickStart.ConfiguratorPanel

Error 7 Type 'Telerik.QuickStart.ConfiguratorPanel' is not defined

Any hints?

Thanks.

[Plamen]

Hi Segundo,

 
You should remove the "<qsf .." lines from the code since they are used only by the demo page itself.  These tags are not related to the functionality of the control.

You can also refer to the isolation steps article shown in the attached image.  

Greetings,
Plamen Zdravkov
the Telerik team

[Zeus_developer]

Hi, thanks for your response.

I tried it you say, but the drag & drop isn't working, please let me explain my scenary:

1.- I have a page which use master page with scriptmanager
2.- thepage use an usercontrol
3.- the usercontrol have the code of the treeview:

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="wucDrag-Drop.ascx.vb" Inherits="EasyTask_UI.wucDrag_Drop" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

        <telerik:RadScriptBlock runat="Server" ID="RadScriptBlock1">

            <script type="text/javascript">
                /* <![CDATA[ */
                var gridId = "<%= RadGrid1.ClientID %>";
                function isMouseOverGrid(target)
                {
                    parentNode = target;
                    while (parentNode != null)
                    {
                        if (parentNode.id == gridId)
                        {
                            return parentNode;
                        }
                        parentNode = parentNode.parentNode;
                    }

                    return null;
                }

                function onNodeDragging(sender, args)
                {
                    var target = args.get_htmlElement();

                    if(!target) return;

                    if (target.tagName == "INPUT")
                    {
                        target.style.cursor = "hand";
                    }

                    var grid = isMouseOverGrid(target)
                    if (grid)
                    {
                        grid.style.cursor = "hand";
                    }
                }

                function dropOnHtmlElement(args)
                {
                    if(droppedOnInput(args))
                        return;

                    if(droppedOnGrid(args))
                        return;
                }

                function droppedOnGrid(args)
                {
                    var target = args.get_htmlElement();

                    while(target)
                    {
                        if(target.id == gridId)
                        {
                            args.set_htmlElement(target);
                            return;
                        }

                        target = target.parentNode;
                    }
                    args.set_cancel(true);
                }

                function droppedOnInput(args)
                {
                    var target = args.get_htmlElement();
                    if (target.tagName == "INPUT")
                    {
                        target.style.cursor = "default";
                        target.value = args.get_sourceNode().get_text();
                        args.set_cancel(true);
                        return true;
                    }
                }

                function dropOnTree(args)
                {
                    var text = "";

                    if(args.get_sourceNodes().length)
                    {
                        var i;
                        for(i=0; i < args.get_sourceNodes().length; i++)
                        {
                            var node = args.get_sourceNodes()[i];
                            text = text + ', ' +node.get_text();
                        }
                    }
                }

                function clientSideEdit(sender, args)
                {
                    var destinationNode = args.get_destNode();

                    if(destinationNode)
                    {
                        var firstTreeView = $find('RadTreeView1');

                        firstTreeView.trackChanges();

                        var sourceNodes = args.get_sourceNodes();
                        for (var i = 0; i < sourceNodes.length; i++)
                        {
                            var sourceNode = sourceNodes[i];
                            sourceNode.get_parent().get_nodes().remove(sourceNode);

                            if(args.get_dropPosition() == "over") destinationNode.get_nodes().add(sourceNode);
                            if(args.get_dropPosition() == "above")  insertBefore(destinationNode, sourceNode);
                            if(args.get_dropPosition() == "below")  insertAfter(destinationNode, sourceNode);
                        }
                        destinationNode.set_expanded(true);
                        firstTreeView.commitChanges();
                    }
                }

                function insertBefore(destinationNode, sourceNode)
                {
                    var destinationParent = destinationNode.get_parent();
                    var index = destinationParent.get_nodes().indexOf(destinationNode);
                    destinationParent.get_nodes().insert(index, sourceNode);
                }

                function insertAfter(destinationNode, sourceNode)
                {
                    var destinationParent = destinationNode.get_parent();
                    var index = destinationParent.get_nodes().indexOf(destinationNode);
                    destinationParent.get_nodes().insert(index+1, sourceNode);
                }

                function onNodeDropping(sender, args)
                {
                    var dest = args.get_destNode();
                    if (dest)
                    {
                        var clientSide = document.getElementById('ChbClientSide').checked;

                        if(clientSide)
                        {
                            clientSideEdit(sender, args);
                            args.set_cancel(true);
                            return;
                        }

                        dropOnTree(args);
                    }
                    else
                    {
                        dropOnHtmlElement(args);
                    }
                }
        /* ]]> */
            </script>

        </telerik:RadScriptBlock>
        <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="Panel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />
        <asp:Panel runat="server" ID="Panel1">

            <div style="padding: 115px 0px 0px 15px;">
                <div style="width: 180px; float: left;">
                    <telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="True" OnNodeDrop="RadTreeView1_HandleDrop"
                        OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging" MultipleSelect="true" EnableDragAndDropBetweenNodes="true">
                    </telerik:RadTreeView>
                </div>

                <div style="float: left">
                    <telerik:RadGrid runat="server" ID="RadGrid1" Width="220px">
                    </telerik:RadGrid>
                    <asp:Label CssClass="textr" runat="server" ID="Label1"></asp:Label>
                </div>
                <div style="clear: both">
                </div>
            </div>
        </asp:Panel>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        RadTreeView1.LoadContentFile("~/treeView.xml")
        RadTreeView1.ExpandAllNodes()

    End If
End Sub

Protected Sub RadTreeView1_HandleDrop(ByVal sender As Object, ByVal e As RadTreeNodeDragDropEventArgs)
    Dim sourceNode As RadTreeNode = e.SourceDragNode
    Dim destNode As RadTreeNode = e.DestDragNode
    Dim dropPosition As RadTreeViewDropPosition = e.DropPosition

    If destNode IsNot Nothing Then
        'drag&drop is performed between trees

        'dropped node will at the same level as a destination node
        If sourceNode.TreeView.SelectedNodes.Count <= 1 Then
            PerformDragAndDrop(dropPosition, sourceNode, destNode)
        ElseIf sourceNode.TreeView.SelectedNodes.Count > 1 Then
            For Each node As RadTreeNode In sourceNode.TreeView.SelectedNodes
                PerformDragAndDrop(dropPosition, node, destNode)
            Next
        End If

        destNode.Expanded = True
        sourceNode.TreeView.UnselectAllNodes()

    End If
End Sub

Private Shared Sub PerformDragAndDrop(ByVal dropPosition As RadTreeViewDropPosition, ByVal sourceNode As RadTreeNode, ByVal destNode As RadTreeNode)
    If sourceNode.Equals(destNode) OrElse sourceNode.IsAncestorOf(destNode) Then
        Return
    End If
    sourceNode.Owner.Nodes.Remove(sourceNode)

    Select Case dropPosition
        Case RadTreeViewDropPosition.Over
            ' child
            If Not sourceNode.IsAncestorOf(destNode) Then
                destNode.Nodes.Add(sourceNode)
            End If
            Exit Select

        Case RadTreeViewDropPosition.Above
            ' sibling - above
            destNode.InsertBefore(sourceNode)
            Exit Select

        Case RadTreeViewDropPosition.Below
            ' sibling - below
            destNode.InsertAfter(sourceNode)
            Exit Select
    End Select
End Sub

also, I want to remove the radgrid.

Thanks.

[Zeus_developer]

Hi,

also, I must say the treeview load fine, but the drag & drop doesn't work

Regards

[Plamen]

Hi Segundo,

I've prepare a sample project based on the code you posted. When the RadTreeView is in a user control its id changes. That's why we find it with jQuery as shown in the code:

var treejQueryObject=$telerik.$("[id$='RadTreeView1']") ;  
var firstTreeView = $find(treejQueryObject.attr('id'));

Hope this will help you.

 All the best,
Plamen Zdravkov
the Telerik team