Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Context Menu multiple postback

1 Answer 71 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Scott Hannon
Top achievements
Rank 1
Scott Hannon asked on 07 Jun 2014, 04:18 PM
I took the Treeview Context Menu demo code from here: Context Menu Demo, slightly modified it, and now when I either try to Copy or Create a new node it produces 2 nodes instead of one.
Example, right-click, choose New Folder and then get 2 instead of one. Same with Copy: What am I doing wrong here? Using the latest Chrome and IE11 as well as latest Telerik version.



01.<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
02. 
03.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04. 
06.<head runat="server">
07.    <title></title>
08.    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
09.</head>
10.<body>
11.    <form id="form1" runat="server">
12.        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
13.            <Scripts>
14.                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
15.                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
16.                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
17.            </Scripts>
18.        </telerik:RadScriptManager>
19.        <script type="text/javascript">
20.            //<!--
21.            function onClientContextMenuShowing(sender, args) {
22.                var treeNode = args.get_node();
23.                treeNode.set_selected(true);
24.                //enable/disable menu items
25.                setMenuItemsState(args.get_menu().get_items(), treeNode);
26.            }
27. 
28.            function onClientContextMenuItemClicking(sender, args) {
29.                var menuItem = args.get_menuItem();
30.                var treeNode = args.get_node();
31. 
32.                menuItem.get_menu().hide();
33. 
34.                switch (menuItem.get_value()) {
35.                    case "Copy":
36.                        break;
37.                    case "Rename":
38.                        treeNode.startEdit();
39.                        break;
40.                    case "NewFolder":
41.                        break;
42.                    case "Delete":
43.                        var result = confirm("Are you sure you want to delete the item: " + treeNode.get_text());
44.                        args.set_cancel(!result);
45.                        break;
46.                }
47.            }
48. 
49.            //this method disables the appropriate context menu items
50.            function setMenuItemsState(menuItems, treeNode) {
51.                for (var i = 0; i < menuItems.get_count() ; i++) {
52.                    var menuItem = menuItems.getItem(i);
53.                    switch (menuItem.get_value()) {
54.                        case "NewFolder":
55.                            //nothing
56.                            break;
57.                        default:
58.                            if (treeNode.get_parent() == treeNode.get_treeView()) {
59.                                menuItem.set_enabled(false);
60.                            }
61.                            else {
62.                                menuItem.set_enabled(true);
63.                            }
64.                            break;
65.                    }
66.                }
67.            }
68.            //-->
69.        </script>
70.        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
71.        </telerik:RadAjaxManager>
72.        <telerik:RadWindowManager ID="RadWindowManager1" runat="server"></telerik:RadWindowManager>
73.        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" Skin="Default"></telerik:RadAjaxLoadingPanel>
74.        <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" LoadingPanelID="RadAjaxLoadingPanel2">
75.            <telerik:RadTreeView ID="rtvSavedReports" runat="server" AllowNodeEditing="True" EnableDragAndDrop="False" EnableDragAndDropBetweenNodes="False" OnContextMenuItemClick="rtvSavedReports_ContextMenuItemClick"
76.                OnClientContextMenuItemClicking="onClientContextMenuItemClicking" OnClientContextMenuShowing="onClientContextMenuShowing"
77.                OnNodeEdit="rtvSavedReports_NodeEdit">
78.                <ContextMenus>
79.                    <telerik:RadTreeViewContextMenu ID="MainContextMenu" runat="server">
80.                        <Items>
81.                            <telerik:RadMenuItem Value="Copy" Text="Copy ..." ImageUrl="~/images/10.gif">
82.                            </telerik:RadMenuItem>
83.                            <telerik:RadMenuItem Value="Rename" Text="Rename ..." Enabled="false" ImageUrl="~/images/rename.gif">
84.                            </telerik:RadMenuItem>
85.                            <telerik:RadMenuItem Value="NewFolder" Text="New Folder" ImageUrl="~/images/12.gif">
86.                            </telerik:RadMenuItem>
87.                            <telerik:RadMenuItem Value="Delete" Text="Delete Folder" ImageUrl="~/images/7.gif">
88.                            </telerik:RadMenuItem>
89.                        </Items>
90.                        <CollapseAnimation Type="none"></CollapseAnimation>
91.                    </telerik:RadTreeViewContextMenu>
92.                </ContextMenus>
93.            </telerik:RadTreeView>
94.        </telerik:RadAjaxPanel>
95.    </form>
96.</body>
97.</html>
 Code-behind:
01.Imports Telerik.Web.UI
02. 
03.Partial Class Default2
04.    Inherits System.Web.UI.Page
05. 
06.    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
07.        If Not IsPostBack Then
08.            PopulateSaveTrees()
09.        End If
10.    End Sub
11. 
12. 
13.    Private Sub PopulateSaveTrees()
14.        Dim savedTreeXML As Object = GetSavedTree()
15.        If savedTreeXML Is DBNull.Value Then
16.            'first time create
17.            rtvSavedReports.LoadXml("<Tree><Node Text=""Saved Reports"" Value=""/"" AllowEdit=""False"" ImageUrl=""~/images/folder.png""/></Tree>")
18.        Else
19.            rtvSavedReports.LoadXml(savedTreeXML)
20.        End If
21.    End Sub
22. 
23.   
24.    Protected Sub rtvSavedReports_ContextMenuItemClick(sender As Object, e As RadTreeViewContextMenuEventArgs) Handles rtvSavedReports.ContextMenuItemClick
25.        Dim clickedNode As RadTreeNode = e.Node
26. 
27.        Select Case e.MenuItem.Value
28.            Case "Copy"
29.                Dim clonedNode As RadTreeNode = clickedNode.Clone()
30.                clonedNode.Text = String.Format("Copy of {0}", clickedNode.Text)
31.                clickedNode.InsertAfter(clonedNode)
32.                'set node's value so we can find it in startNodeInEditMode
33.                clonedNode.Value = clonedNode.GetFullPath("/")
34.                clonedNode.Selected = True
35.                StartNodeInEditMode(clonedNode.Value)
36.            Case "NewFolder"
37.                Dim newFolder As New RadTreeNode(String.Format("New Folder {0}", clickedNode.Nodes.Count + 1))
38.                newFolder.Selected = True
39.                newFolder.ImageUrl = clickedNode.ImageUrl
40.                clickedNode.Nodes.Add(newFolder)
41.                clickedNode.Expanded = True
42.                newFolder.Value = newFolder.GetFullPath("/")
43.                StartNodeInEditMode(newFolder.Value)
44.            Case "Delete"
45.                If clickedNode.Nodes.Count <> 0 Then
46.                    RadScriptManager.RegisterStartupScript(Page, Page.[GetType](), "nodedeleteerror", "alert('Cannot delete node with children!\nEither delete or move all children.');", True)
47.                    Exit Select
48.                End If
49.                clickedNode.Remove()
50.        End Select
51.    End Sub
52. 
53.    Private Sub StartNodeInEditMode(ByVal nodeValue As String)
54.        'find the node by its Value and edit it when page loads
55.        Dim js As String = "Sys.Application.add_load(editNode); function editNode(){ "
56.        js += "var tree = $find(""" + rtvSavedReports.ClientID + """);"
57.        js += "var node = tree.findNodeByValue('" + nodeValue + "');"
58.        js += "if (node) node.startEdit();"
59.        js += "Sys.Application.remove_load(editNode);};"
60. 
61.        RadScriptManager.RegisterStartupScript(Page, Page.[GetType](), "nodeEdit", js, True)
62.    End Sub
63. 
64.    Protected Sub rtvSavedReports_NodeEdit(sender As Object, e As RadTreeNodeEditEventArgs) Handles rtvSavedReports.NodeEdit
65.        e.Node.Text = e.Text
66.    End Sub
67. 
68.    Private Function GetSavedTree() As Object
69.        Return DBNull.Value
70.    End Function
71. 
72.End Class

1 Answer, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 11 Jun 2014, 11:23 AM
Hello Scott,

Thank you for contacting Telerik Support.

The reason for the experienced behavior is that you are hooking the ContextMenuItemClick event twice - once from the markup and once when you are specifying - Handles rtvSavedReports.ContextMenuItemClick. Thus the logic in the handler is executed twice. Please consider to use only one of the approaches for hooking the event handler.

Hope this information helps. I will be glad to assist you any further.

Regards,
Nencho
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
TreeView
Asked by
Scott Hannon
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Share this question
or