[Solved] Load on demand with Server Side Drag N Drop

[Toby]

Hi,

I have a Treeview which is loading from a webserver, which works perfectly. I currently have it connected to a AJAX manager. For renameing of nodes it works perfectly.

For drag and drop I have connected the relevant events up to update my database, which works fine. I can only get the treeview to update by doing a full page refresh.

I have used the methods on the server as described in this thread ( http://www.telerik.com/community/forums/aspnet-ajax/treeview/radtreeview-drag-drop-serverside.aspx ) but after moving a node - it does not reflect its new position until i force a full page refresh.

here is the markup for the treeview

<telerik:RadTreeView runat="server" ID="Treeview" AllowNodeEditing="True"
                            EnableDragAndDrop="True" EnableDragAndDropBetweenNodes="True" OnClientNodeClicking="onNodeClicking"
                            onnodedrop="Treeview_NodeDrop" onnodeedit="Treeview_NodeEdit"
                    CheckBoxes="False">
                            <WebServiceSettings Path="WebServices/GroupsDataSource.asmx" Method="GetGroupNodes" />
                        </telerik:RadTreeView>

page load

protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.Browser.Browser == "Firefox")
                Response.Cache.SetNoStore();

            if ((bool)Session["LoggedIn"] == false)
                Response.Redirect("Default.aspx?referer=" + Request.FilePath);

            if (!IsPostBack)
            {
                LoadRootNodes(Treeview, TreeNodeExpandMode.WebService);
            }

        }

        private void LoadRootNodes(RadTreeView treeView, TreeNodeExpandMode expandMode)
        {
            WebSession webSess = (WebSession)Session["WebSession"];

            string qry = string.Format(DB.SQLSelectHeirachyMoveNull, ConfigurationConsts.ExtensionGroupViewId);
            DataTable dtGroups = webSess.DataSource.RetrieveDataTable(qry);

            foreach (DataRow aRow in dtGroups.Rows)
            {
                RadTreeNode newNode = new RadTreeNode();
                newNode.Text = aRow["NAME"].ToString();
                newNode.Value = aRow["ID"].ToString();
                newNode.Attributes.Add("GROUPVIEWID", Convert.ToString(aRow["GROUPVIEWID"]));
                newNode.ExpandMode = TreeNodeExpandMode.WebService;
                treeView.Nodes.Add(newNode);
            }
        }

 and the drag drop functions

        protected void Treeview_NodeDrop(object sender, RadTreeNodeDragDropEventArgs e)
        {
            WebSession webSess = (WebSession)Session["WebSession"];
            webSess.MasterSystem.GroupsSystem.MoveNode(e.SourceDragNode.Value,e.DestDragNode.Value);

            RadTreeNode sourceNode = e.SourceDragNode;
            RadTreeNode destNode = e.DestDragNode;
            RadTreeViewDropPosition dropPosition = e.DropPosition;

            if (destNode != null) //drag&drop is performed between trees
            {

                if (sourceNode.TreeView.SelectedNodes.Count <= 1)
                {
                    PerformDragAndDrop(dropPosition, sourceNode, destNode);
                }
                else if (sourceNode.TreeView.SelectedNodes.Count > 1)
                {
                    foreach (RadTreeNode node in sourceNode.TreeView.SelectedNodes)
                    {
                        PerformDragAndDrop(dropPosition, node, destNode);
                    }
                }

                destNode.Expanded = true;

            }


        }

        private void PerformDragAndDrop(RadTreeViewDropPosition dropPosition, RadTreeNode sourceNode,
         RadTreeNode destNode)
        {
            if (sourceNode.Equals(destNode) || sourceNode.IsAncestorOf(destNode))
            {
                return;
            }
            sourceNode.Owner.Nodes.Remove(sourceNode);

            switch (dropPosition)
            {
                case RadTreeViewDropPosition.Over:
                    // child
                    if (!sourceNode.IsAncestorOf(destNode))
                    {
                        destNode.Nodes.Add(sourceNode);

                    }
                    break;

                case RadTreeViewDropPosition.Above:
                    // sibling - above
                    destNode.InsertBefore(sourceNode);
                    break;

                case RadTreeViewDropPosition.Below:
                    // sibling - below
                    destNode.InsertAfter(sourceNode);
                    break;
            }
        }

any help would be appreciated.

[Atanas Korchev]

Hi Toby Moxha,

I cannot see any problems by inspecting your code. What happens when you debug it? Do all nodes get inserted in the right position in the treeview? Also do you use ajax in your application? Does it work if you disable ajax?

Regards,

Albert,

the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Toby]

After the AJAX refresh the nodes are not reflected in their new position. If i disable the AjaxManager it all works fine. Whilst debugging it all the events fire correctly.

[Toby]

After the AJAX refresh the nodes are not reflected in their new position. If i disable the AjaxManager it all works fine. Whilst debugging it all the events fire correctly.

[Atanas Korchev]

Hi Toby Moxha,

Then I think there is a missing ajax setting. It seems like the ajax manager is not configured to update the treeview.

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Toby]

this is how the ajax manager is configured

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Treeview">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Treeview" LoadingPanelID="RadAjaxLoadingPanel1"/>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ItemsGrid">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ItemsGrid" LoadingPanelID="RadAjaxLoadingPanel2"/>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>

thanks

[Veselin Vasilev]

Hi Toby Moxha,

It seems to be correct. Can you please open a support ticket and send us a sample project where we can observe the problem?

Best wishes,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Toby]

Whilst stripping the project down to send to yourselves, I have discovered the issue was being caused by a serverside code block not being encased in a RadCodeBlock.

thanks anyway
Toby

[Toby]

I have another small issue.

If you drag a node to an existing node that is not expanded, after dragging the target node will show the new node that was just dragged there but wont show the other child nodes until you manually click to expand it. Once you do this it will duplicate the node that was just dragged there as well.

[Veselin Vasilev]

Hi Toby Moxha,

The problem seems to be fixed in the latest version - Q2 2009. Please download it and test it.

Kind regards,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Toby]

I have replied to the on the other thread I started

http://www.telerik.com/community/forums/aspnet-ajax/treeview/nodes-duplicating-with-serverside-drag-n-drop-and-load-on-demand.aspx