Add New Node Context Menu - Capture Text

2 posts, 1 answers
  1. William
    William  avatar
    72 posts
    Member since:
    Jun 2011

    Posted 21 Jun 2011 Link to this post

    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();
    }

  2. Answer
    Helen
    Admin
    Helen avatar
    1052 posts

    Posted 24 Jun 2011 Link to this post

    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.

Back to Top