This is a migrated thread and some comments may be shown as answers.

Context Menu multiple postback

1 Answer 134 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

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.

05.<html xmlns="http://www.w3.org/1999/xhtml">

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

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.