Add New Node Context Menu - Capture Text

[William]

I have a context menu where I add new nodes. I used this example to create the context menu:http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/contextmenu/defaultcs.aspx. My issue is that when a user add's a new node I need to capture what the user names the node, so that I can add it to the database. Currently the code uses javascript to set the node as editable on Page Load.

How do I go about capturing the text value the user inputs when adding a new node?

JAVASCRIPT

<script type="text/javascript">
    //<!--
    function onClientContextMenuShowing(sender, args) {
        var treeNode = args.get_node();
        treeNode.set_selected(true);
        //enable/disable menu items
        setMenuItemsState(args.get_menu().get_items(), treeNode);
    }

    function onClientContextMenuItemClicking(sender, args) {
        var menuItem = args.get_menuItem();
        var treeNode = args.get_node();
        menuItem.get_menu().hide();

        switch (menuItem.get_value()) {
            case "Rename":
                treeNode.startEdit();
                break;
            case "addLocation":
                break;
        }
    }

    //this method disables the appropriate context menu items
    function setMenuItemsState(menuItems, treeNode) {
        for (var i = 0; i < menuItems.get_count(); i++) {
            var menuItem = menuItems.getItem(i);
            switch (menuItem.get_value()) {
                case "Rename":
                    formatMenuItem(menuItem, treeNode, 'Rename "{0}"');
                    break;
                case "addLocation":
                    if (treeNode.get_parent() == treeNode.get_treeView()) {
                        menuItem.set_enabled(false);
                    }
                    else {
                        menuItem.set_enabled(true);
                    }
                    break;
            }
        }
        //formats the Text of the menu item
        function formatMenuItem(menuItem, treeNode, formatString) {
            var nodeValue = treeNode.get_value();
            if (nodeValue && nodeValue.indexOf("_Private_") == 0) {
                menuItem.set_enabled(false);
            }
            else {
                menuItem.set_enabled(true);
            }
            var newText = String.format(formatString, extractTitleWithoutMails(treeNode));
            menuItem.set_text(newText);
        }

        //checks if the text contains (digit)
        function hasNodeMails(treeNode) {
            return treeNode.get_text().match(/\([\d]+\)/ig);
        }

        //removes the brackets with the numbers,e.g. Inbox (30)
        function extractTitleWithoutMails(treeNode) {
            return treeNode.get_text().replace(/\s*\([\d]+\)\s*/ig, "");
        }
    }


    //-->
      </script>

ASPX

<telerik:RadAjaxLoadingPanel ID="LocationsLoadingPanel" runat="server" Transparency="30" Skin="Vista"></telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxPanel ID="LocationsPanel" runat="server" LoadingPanelID="LocationsLoadingPanel">
            <telerik:RadTreeView ID="LocationsTreeView" runat="server" EnableDragAndDrop="true"  MultipleSelect="true" EnableDragAndDropBetweenNodes="true"
            AllowNodeEditing="true" OnContextMenuItemClick="LocationsTreeView_ContextMenuItemClick" OnClientContextMenuItemClicking="onClientContextMenuItemClicking"
            OnClientContextMenuShowing="onClientContextMenuShowing" OnNodeEdit="LocationsTreeView_NodeEdit">
             <ContextMenus>
                    <telerik:RadTreeViewContextMenu ID="MainContextMenu" runat="server">
                        <Items>
                            <telerik:RadMenuItem Value="Rename" Text="Rename ..." Enabled="true" ImageUrl="images/icons/edit_48.png"
                                PostBack="false">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem IsSeparator="true">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Value="addLocation" Text="Add Location" ImageUrl="images/icons/add_16.png">
                            </telerik:RadMenuItem>
                        </Items>
                        <CollapseAnimation Type="none" />
                    </telerik:RadTreeViewContextMenu>
                </ContextMenus>
            </telerik:RadTreeView>
        </telerik:RadAjaxPanel>

C#

protected void LocationsTreeView_ContextMenuItemClick(object sender, RadTreeViewContextMenuEventArgs e)
{
    RadTreeNode clickedNode = e.Node;

    switch (e.MenuItem.Value)
    {
        case "addLocation":
            RadTreeNode newLocation = new RadTreeNode(string.Format("Add Location"));
            newLocation.Selected = true;
            newLocation.ImageUrl = clickedNode.ImageUrl;
            clickedNode.Nodes.Add(newLocation);

            clickedNode.Expanded = true;
            //update the number in the brackets
            if (Regex.IsMatch(clickedNode.Text, unreadPattern))
                clickedNode.Text = Regex.Replace(clickedNode.Text, unreadPattern, "(" + clickedNode.Nodes.Count.ToString() + ")");

            clickedNode.Font.Bold = true;
            //set node's value so we can find it in startNodeInEditMode
            newLocation.Value = newLocation.GetFullPath("/");
            startNodeInEditMode(newLocation.Value);

            // Add Location Record to Database
            string ParentID = clickedNode.Value;
            Guid ID = Guid.NewGuid();
            string LocationID = ID.ToString();
            string Name = newLocation.Text;
            LocationsTreeView_AddLocation(ParentID, LocationID, Name);

            break;
        case "Delete":
            clickedNode.Remove();
            break;
    }
}

private void startNodeInEditMode(string nodeValue)
{
    //find the node by its Value and edit it when page loads
    string js = "Sys.Application.add_load(editNode); function editNode(){ ";
    js += "var tree = $find(\"" + LocationsTreeView.ClientID + "\");";
    js += "var node = tree.findNodeByValue('" + nodeValue + "');";
    js += "if (node) node.startEdit();";
    js += "Sys.Application.remove_load(editNode);};";

    RadScriptManager.RegisterStartupScript(Page, Page.GetType(), "nodeEdit", js, true);
}

// Used when adding a Location
protected void LocationsTreeView_AddLocation(string ParentID, string LocationID, string Name)
{
    // Set parameters for insert
    locationDataSource.InsertParameters["LocationID"].DefaultValue = LocationID;
    locationDataSource.InsertParameters["ParentID"].DefaultValue = ParentID;
    locationDataSource.InsertParameters["Name"].DefaultValue = Name;

   // locationDataSource.Insert();
}

// Used when renaming a Location
protected void LocationsTreeView_NodeEdit(object sender, RadTreeNodeEditEventArgs e)
{
    // Update Name on client side
    e.Node.Text = e.Text;

    // Update Name in database
    locationDataSource.UpdateParameters["Name"].DefaultValue = e.Text;
    locationDataSource.UpdateParameters["ID"].DefaultValue = e.Node.Value;

    locationDataSource.Update();
}

[Helen]

Hi William,

The text of the added node is available server-side in the NodeEdit event when the user presses 'Enter'.
I recorded a video for your reference.

Regards,
Helen
the Telerik team