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

Node Editing from Context Menu Command

7 Answers 153 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
M
Top achievements
Rank 1
M asked on 15 Apr 2009, 06:42 PM
I'm pretty new to Telerik controls and was wondering how I can edit a node from a context menu (instead of selecting the node twice).  For instance, when I right-click the node, I have several options from a context menu, one of which is "Edit Node".  When I select this menu item, I'd like to be able to edit the node in the tree.  How would I go about doing this?  Thanks.

7 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 16 Apr 2009, 06:40 AM
Hi,

Try out the following code snippet for editing the RadTreeNode using ContextMenu.

[ASPX]
 
<telerik:radtreeview id="RadTreeView1" runat="server" OnClientContextMenuItemClicking="onClientContextMenuItemClicking"
<ContextMenus> 
<telerik:RadTreeViewContextMenu ID="ContextMenu"
    <Items> 
        <telerik:RadMenuItem Text="Copy" Value="Copy"></telerik:RadMenuItem> 
        <telerik:RadMenuItem Text="Edit" Value="Edit"></telerik:RadMenuItem> 
    </Items> 
</telerik:RadTreeViewContextMenu> 
</ContextMenus> 
<Nodes> 
   . . . 
</Nodes> 
</telerik:radtreeview> 

[JavaSCript]
 
<script type="text/javascript"
function onClientContextMenuItemClicking(sender, args) 
    var menuItem = args.get_menuItem(); 
    var treeNode = args.get_node(); 
    menuItem.get_menu().hide(); 
    switch(menuItem.get_value()) 
    { 
        case "Copy"
            break
        case "Edit"
            treeNode.startEdit(); 
            break;                                          
    } 
</script> 

Refer the online demo which illustrates same scenario. Hope this helps.
TreeView / Context Menu

Thanks,
Shinu.
0
Michael Warden
Top achievements
Rank 1
answered on 19 Apr 2010, 04:46 PM
i've implemented this technique, but when i click the Edit item in my context menu, the node turns to edit mode briefly, but then page_load runs and the tree resets back, where that node isn't editable, you don't get a chance to actually edit it.  my page_load looks like this so when it runs nothing is actually happening since it's an ajax request.

 

If RadAjaxManager1.IsAjaxRequest = True Then

 

 

Else

 

    if ispostback then

    else

    end if
end if
0
Veselin Vasilev
Telerik team
answered on 20 Apr 2010, 11:37 AM
Hello Michael Warden,

Probably you have subscribed to the server ContextMenuItemClick event and that is why the page postbacks.
If you check the demo that Shinu provided you will see how to implement the "start node in edit mode" after the postback.

Kind regards,
Veskoni
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Michael Warden
Top achievements
Rank 1
answered on 20 Apr 2010, 05:08 PM
ok, i see the approach, now when ContextMenuItemClick fires, for the 'Update' menu item, i have the following code

e.Node.Selected =

True

 

 

Dim js As String = "function pageLoad(){ "

 

js +=

"var tree = $find(""<%= rtReportList.ClientID %>"");"

 

js +=

"if (tree.get_selectedNode() != null)"

 

js +=

"{"

 

js +=

"tree.get_selectedNode().startEdit();"

 

js +=

"}"

 

js +=

"}"

 

ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(),

"nodeEdit", js, True)

but i'm getting the attached error after this code actually runs and the page reloads.

 

0
Nikolay Tsenkov
Telerik team
answered on 21 Apr 2010, 12:28 PM
Hello Michael Warden,

This is still through the server handler. You don't need to handle this on the server. You need to handle this in the client code, e.g. OnClientContextMenuItemClicking should be assigned to JavaScript handler.

Here is ready-to-use example (with the suggested implementation from Shinu):

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
 
    <script type="text/javascript">
        function onClientContextMenuClicked(sender, args) {
            var selectedItem = args.get_node();
            var selectedMenuOption = args.get_menuItem();
            switch (selectedMenuOption.get_text()) {
                case "Delete":
                    {
                        break;
                    }
                case "Edit":
                    {
                        selectedItem.startEdit();
                        break;
                    }
            }
        }
    </script>
 
    <telerik:RadTreeView ID="RadTreeView1" runat="server"
        OnClientContextMenuItemClicked="onClientContextMenuClicked">
        <ContextMenus>
            <telerik:RadTreeViewContextMenu>
                <Items>
                    <telerik:RadMenuItem Text="Delete" Value="delete"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Edit" Value="edit"></telerik:RadMenuItem>
                </Items>
            </telerik:RadTreeViewContextMenu>
        </ContextMenus>
        <Nodes>
            <telerik:RadTreeNode Text="Item 1" Value="item 1" />
            <telerik:RadTreeNode Text="Item 2" Value="item 2" />
        </Nodes>
    </telerik:RadTreeView>
    </form>
</body>
</html>


Hope this will help you.


All the best,
Nikolay Tsenkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Micke83
Top achievements
Rank 1
answered on 22 Apr 2010, 02:55 PM
If we use this approach, then how do we fire the server delete event if for instance the user clicks "Delete" in the context menu?

Thanks,
Michael
0
Nikolay Tsenkov
Telerik team
answered on 23 Apr 2010, 02:47 PM
Hi Micke83,

If you want to handle the delete action on the server, than the situation is a bit different.
You need to plug-in to the event OnClientContextMenuClicking, instead OnClientContextMenuClicked. What this means is that you basically are plugging before any action or other event occurs and you need that so in the case of an "Edit" action - the edit is done on the client-side and further events are canceled to prevent a postback.

But when the action is "Delete" - it still fires the OnClientContextMenuClicking, but just breaks-out from the handler and no other events are canceled, e.g. if you are handling the server event, it will be fired (not suppressed) and the server handler is executed successfully.

Again, I am sending you a complete example, that you can directly run and debug (to see what's going on under the hood (: )

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
 
    <script type="text/javascript">
        function onClientContextMenuClicking(sender, args) {
            var selectedItem = args.get_node();
            var selectedMenuOption = args.get_menuItem();
            switch (selectedMenuOption.get_text()) {
                case "Delete":
                    {
                        break;
                    }
                case "Edit":
                    {
                        var contextMenu = selectedMenuOption.get_menu();
                        // because the later events are being cancelled we need to hide the menu
                        // as there is no event to hide it automatically
                        contextMenu.hide();
 
                        sender.trackChanges();
                        selectedItem.startEdit();
 
                        args.set_cancel(true);
                        break;
                    }
            }
        }
 
        function OnClientNodeEdited(sender, args) {
            sender.commitChanges();
        }
    </script>
 
    <telerik:RadTreeView ID="RadTreeView1" runat="server"
         OnClientContextMenuItemClicking="onClientContextMenuClicking" OnClientNodeEdited="OnClientNodeEdited">
        <ContextMenus>
            <telerik:RadTreeViewContextMenu>
                <Items>
                    <telerik:RadMenuItem Text="Delete" Value="delete"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Edit" Value="edit"></telerik:RadMenuItem>
                </Items>
            </telerik:RadTreeViewContextMenu>
        </ContextMenus>
        <Nodes>
            <telerik:RadTreeNode Text="Item 1" Value="item 1" />
            <telerik:RadTreeNode Text="Item 2" Value="item 2" />
            <telerik:RadTreeNode Text="Item 3" Value="item 2" />
            <telerik:RadTreeNode Text="Item 4" Value="item 2" />
            <telerik:RadTreeNode Text="Item 5" Value="item 2" />
        </Nodes>
    </telerik:RadTreeView>
    </form>
</body>
</html>

And here is the server-side handler of the delete event:
Protected Sub RadTreeView1_ContextMenuItemClick(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadTreeViewContextMenuEventArgs) Handles RadTreeView1.ContextMenuItemClick
        e.Node.Remove()
    End Sub

I hope this will be helpful.

Best wishes,
Nikolay Tsenkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
TreeView
Asked by
M
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Michael Warden
Top achievements
Rank 1
Veselin Vasilev
Telerik team
Nikolay Tsenkov
Telerik team
Micke83
Top achievements
Rank 1
Share this question
or