Context Menu multiple postback

2 posts, 0 answers
  1. Scott Hannon
    Scott Hannon avatar
    18 posts
    Member since:
    Dec 2008

    Posted 07 Jun 2014 Link to this post

    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

  2. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 11 Jun 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top