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

Node Editing from Context Menu Command

7 Answers 205 Views

TreeView

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

7 Answers, 1 is accepted

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.

answered on 20 Apr 2010, 05:08 PM

nullerror.jpg

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.

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">

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

<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.

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">

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

<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