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

Add New Node Context Menu - Capture Text

1 Answer 123 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
William
Top achievements
Rank 1
William asked on 21 Jun 2011, 07:08 PM
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();
}

1 Answer, 1 is accepted

Sort by
0
Accepted
Helen
Telerik team
answered on 24 Jun 2011, 05:02 PM
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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Tags
TreeView
Asked by
William
Top achievements
Rank 1
Answers by
Helen
Telerik team
Share this question
or