edit node not generating a ClientOperation

[Tom Parks]

I am using the Q3 2008 version of Telerik RadControls for ASP.NET AJAX treeview.  I want to do most of my add, move, delete and edit logic on the clientside, then when the user is done they hit a SAVE button and i'll persist the changes on the Server/DB.

This is working fine for add and remove.  But when I edit a node, no ClientOperation appears for this on the server side.  I should note I'm using a context menu for the edit and delete of nodes.

Some of my code:

The treeview .aspx

<telerik:RadTreeView ID="tvwENB" runat="server" EnableDragAndDrop="true"   EnableDragAndDropBetweenNodes="true"
                    AllowNodeEditing="true" OnClientNodeDropping="onNodeDropping" OnClientContextMenuItemClicked="onClientContextMenuItemClicked">
                     <ContextMenus>
                        <telerik:RadTreeViewContextMenu Skin="Outlook" ID="MainContextMenu" runat="server">
                            <Items>
                                <telerik:RadMenuItem Value="Edit" Text="Edit ..." ImageUrl="~/imgs/pencil.gif" PostBack="false" ></telerik:RadMenuItem>
                                <telerik:RadMenuItem Value="Delete" Text="Delete ..." ImageUrl="~/imgs/setup/delete.png" PostBack="false"></telerik:RadMenuItem>
                            </Items>
                        </telerik:RadTreeViewContextMenu>
                    </ContextMenus>
                </telerik:RadTreeView>

The Javascript for my EditNode method...

function onClientContextMenuItemClicked(sender, args)
{
    var menuItem = args.get_menuItem();
    var treeNode = args.get_node();

    switch(menuItem.get_value())
    {
        case "Delete":
            RemoveNode(treeNode);
            break;
        case "Edit":
            EditNode(treeNode);
            break;
    }
}

function EditNode(node)
{
    var treeView = $find("ctl00_MP_tvwENB");
    treeView.trackChanges();
    node.get_treeView()._startEdit(node);
    treeView.commitChanges();
}

function RemoveNode(node)
{
    var treeView = $find("ctl00_MP_tvwENB");
    var parentNode = node.get_parent();
    treeView.trackChanges();
    parentNode.get_nodes().remove(node);
    treeView.commitChanges();
}

The code for the Remove works fine, removing the node from the screen and generating a remove operation type on the server.  The edit does not however generate the expected change operation.  The text of the edited node does change on the screen.  How to get this to work?

[Atanas Korchev]

Hi Tom Parks,

The editing operation does not finish when you call _startEdit that's why it is not recorded as a client-side operation. To do so please subscribe to the editing and edited client-side events and call trackChanges/commitChanges there. Here is a sample implementation:
            <script type="text/javascript">
                function onClientContextMenuItemClicked (sender, args)
                {
                    var node = args.get_node();
                    node.startEdit();
                }
               
                function nodeEditing(sender, args)
                {
                    sender.trackChanges();
                }
               
                function nodeEdited(sender, args)
                {
                    sender.commitChanges();
                }
            </script>
            <telerik:RadTreeView ID="tvwENB" runat="server" EnableDragAndDrop="true" EnableDragAndDropBetweenNodes="true"
                AllowNodeEditing="true"  OnClientContextMenuItemClicked="onClientContextMenuItemClicked" OnClientNodeEditing="nodeEditing" OnClientNodeEdited="nodeEdited">
                <ContextMenus>
                    <telerik:RadTreeViewContextMenu Skin="Outlook" ID="MainContextMenu" runat="server">
                        <Items>
                            <telerik:RadMenuItem Value="Edit" Text="Edit ..." >
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Value="Delete" Text="Delete ..." >
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadTreeViewContextMenu>
                </ContextMenus>
                <Nodes>
                    <telerik:RadTreeNode Text="Root" Expanded="True">
                        <Nodes>
                            <telerik:RadTreeNode Text="Child"></telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                </Nodes>
            </telerik:RadTreeView>
All the best,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.