BUG: OnClientNodeEdited and .get_nodes().remove(node)

7 posts, 0 answers
  1. Aleksandar
    Aleksandar avatar
    52 posts
    Member since:
    Jul 2012

    Posted 09 Oct 2008 Link to this post

    After few hours of troubleshooting, figured out that OnClientNodeEdited is too early for removing node with .get_nodes().remove(node).
    The code is as follows:
    ASPX:
    <%@ Page Language="VB" AutoEventWireup="false"   
    CodeFile="tempPage.aspx.vb" Inherits="tempPage" %> 
     
    <%@ Register Assembly="Telerik.Web.UI"   
    Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head> <title>Test Page</title></head>  
    <body> 
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
        <script type="text/javascript">  
           
            function FinishEditing(sender, eventArgs)  
                {  
                    var node = eventArgs.get_node();  
                    var nodenodeParent=node.get_parent();  
                    nodeParent.get_nodes().remove(node);  
                }  
     
            function FolderContextClicked(sender, eventArgs)  
                {  
                    var node=eventArgs.get_node();  
                    node.startEdit()  
                }  
                  
        </script> 
    </telerik:RadCodeBlock> 
    <form id="form1" runat="server">  
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        </telerik:RadScriptManager> 
     <telerik:RadTreeView ID="FolderView" runat="server"   
        AllowNodeEditing="true"   
        OnClientNodeEdited="FinishEditing" 
        MultipleSelect="false" ShowLineImages="true"   
        OnClientContextMenuItemClicked="FolderContextClicked"   
        Skin="Outlook">  
        <CollapseAnimation Duration="100" Type="OutQuint" /> 
        <ExpandAnimation Duration="100" /> 
        <ContextMenus> 
        <telerik:RadTreeViewContextMenu   
         ID="FolderContextMenuForJunk" Skin="Outlook">  
        <Items> 
            <telerik:RadMenuItem Text="Edit"   
             Value="Edit"></telerik:RadMenuItem> 
        </Items> 
        </telerik:RadTreeViewContextMenu> 
        </ContextMenus> 
    </telerik:RadTreeView> 
    </form> 
    </body> 
    </html> 
     

    VB:
    Imports System.Data.SqlClient  
    Imports System.Data  
    Partial Class tempPage  
        Inherits System.Web.UI.Page  
         
     
        Protected Sub Page_Load(ByVal sender As Object, _  
          ByVal e As System.EventArgs) Handles Me.Load  
     
      Dim objNode As New Telerik.Web.UI.RadTreeNode("One", "One")  
      FolderView.Nodes.Add(objNode)  
      objNode = New Telerik.Web.UI.RadTreeNode("Two", "Two")  
      FolderView.Nodes.Add(objNode)  
      objNode = New Telerik.Web.UI.RadTreeNode("Three", "Three")  
      FolderView.Nodes.Add(objNode)  
     
        End Sub  
    End Class  
     

    If something is called "OnClientNodeEdited " one expects that all work is finished and no problem for remove should exists. But, it is not that way. 
    Partial fix is replacing remove line with:
    window.setTimeout(function() {   
    nodeParent.get_nodes().remove(node);}, 200); 

    But propper fix would be altering TreeView class and making sure when this event fires up, actions like remove are possible.

    Alex
     
  2. Cole
    Cole avatar
    11 posts
    Member since:
    Nov 2007

    Posted 03 Aug 2009 Link to this post

    Greetings,

    Been troubleshooting this all day, and I finally keyed in the proper search terms to stumble across this thread ... and thank you, Alex, for posting, as this has been driving me nuts!

    So, I am using Q2 2009, and I am getting the same results for using .get_nodes().remove(node).  Alex is correct, as I made the assumption that an event name "OnClientNodeEdited" indicates that editing has completed and that I should be able to remove a node if the tree is available.  To test that the tree is available, I set an alert('node count = ' + tree.get_nodes().get_count()) inside my ClientNodeEdited event handler, and it yields the correct # of nodes every time, but it throws a js error when I attempt a .remove(node) action in this event; the error is " 'this.get_treeView()' is null or not an object ".

    Will this be corrected, or am I just missing the concept behind when .remove(node) is allowed?

    Thanks in advance!

  3. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 05 Aug 2009 Link to this post

    Hello Cole,

    The OnClientNodeEdited fires when you click Enter or outside of the edited node. After that the treeview performs some actions like removing the input area and updating the node that has just been edited.

    On a side note, who would expect that after editing a node that node will be automatically removed?

    Sincerely yours,
    Veselin Vasilev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  4. Aleksandar
    Aleksandar avatar
    52 posts
    Member since:
    Jul 2012

    Posted 05 Aug 2009 Link to this post

    In many cases that is expected behaviour. New file: Client clicks new file button, new node get generated and editable (for user to change the name) and if the input is invalid, node gets removed and client informed (focus is sometimes tricky to acheive). The same with new folder in web mail client. Wherever invalid input in edited node is possible, removing the node is one of the options.

    Regards,
    Alex
  5. Cole
    Cole avatar
    11 posts
    Member since:
    Nov 2007

    Posted 06 Aug 2009 Link to this post

    Greetings Veselin,

    Thanks for the response.

    In the current application we're building, we have a radTreeView used to list categories at the top level, each of which contains pages in the second level, each page of which contains content items at the third level (consistently, each type of item at levels 0, 1, and 2).  A context menu for each category node has the option to add a "new category".  When clicked, a new node (category) appears in edit mode with text set to be empty.  If the user enters a name for the category, it's posted back (for storing to the database) and displays on the tree; if the users click away from the node, having entered nothing, the node is removed (with no postback, as it's not necessary).  The .remove() method would be the obvious choice here, and Alex's solution works; however, as Alex pointed out, the proper way for this to work would seem to be to leave out the timeout, and the .remove() method to work as expected.

    This example coupled with Alex's examples show that there is definitely an appropriate need for this functionality, where expected, as it provides a way for us to offer ease of use and tidy organization of the categories, in this case, by tying up loose ends based on the user's interaction.

    If using .remove() within the OnClientNodeEdited event is not the appropriate way to handle, how might you guys handle this given the above-mentioned scenario?
  6. Dimitar Milushev
    Admin
    Dimitar Milushev avatar
    555 posts

    Posted 12 Aug 2009 Link to this post

    Hi Cole,

    You are right - it should be possible to use the .remove() method during the NodeEdited event and even during NodeEditing. I'll investigate which of the two options or if both are possible and we'll try to fix this for the next Service Pack.

    As for now, the only option seems to be to use a timeout.

    All the best,
    Dimitar Milushev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  7. Cole
    Cole avatar
    11 posts
    Member since:
    Nov 2007

    Posted 12 Aug 2009 Link to this post

    Thanks for the response, Dimitar.  That sounds great!

    Cole
Back to Top