problem with double click event innerHTML of object

6 posts, 1 answers
  1. jonathan
    jonathan avatar
    23 posts
    Member since:
    Jun 2008

    Posted 09 Nov 2008 Link to this post

    Hi,

    What I want to achieve is: get the text of the node including the tags that are saved inside the node. I want to remove the '-' inside a span.
    Problem: using the get_text() cause <span> to disappear (i think it is being stripped). So i used get_textElement().innerHTML. i tried to assign the text back to the innerHTML, but the result was that the '-' is still present, which means it was not successful in assigning the value to the node.
    function OnClientDoubleClick_Node(sender, args)
    {
        var text = args.get_node().get_textElement().innerHTML;
        while (text.match("<SPAN>-</SPAN>") != null)
        {text = text.replace("<SPAN>-</SPAN>", "");}
        args.get_node().get_textElement().innerHTML = text;
    }

    i also tried to use the set_text(). but i also have a problem here. when i double click the node.
    the text from node is already correct. but this: <INPUT size=144 value="text from node"> keeps showing up.
    function OnClientDoubleClick_Node(sender, args)
    {
        var text = args.get_node().get_textElement().innerHTML;
        while (text.match("<SPAN>-</SPAN>") != null)
        {text = text.replace("<SPAN>-</SPAN>", "");}
        args.get_node().set_text(text);
    }

    regards,
    jonathan
  2. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 10 Nov 2008 Link to this post

    Hello jonathan,

    The double click event is fired later than the moment in which you can update the text for node editing. The only workaround I can suggest is to override an internal JavaScript function of RadTreeView and use the OnClientNodeEditing event instead:

    <script >
    function OnClientDoubleClick_Node(sender, args)
    {
        var text = args.get_node().get_textElement().innerHTML;
        while (text.match("<SPAN>-</SPAN>") != null)
        {text = text.replace("<SPAN>-</SPAN>", "");}
        args.get_node().get_textElement().innerHTML = text;
    }        </script>


            <telerik:RadTreeView ID="RadTreeView1"
                runat="server"
                OnClientNodeEditing="OnClientDoubleClick_Node"
                AllowNodeEditing="true"
                >
                <Nodes>
                    <telerik:RadTreeNode Text="One<span>-</span>Two" />
                </Nodes>
               
            </telerik:RadTreeView>
           
            <script type="text/javascript">
            var startEdit = Telerik.Web.UI.RadTreeView.prototype._startEdit;
            Telerik.Web.UI.RadTreeView.prototype._startEdit = function (node)
            {
                this._raiseEvent("nodeEditing", node);
                startEdit.apply(this, arguments);
            }
            </script>

    By the way in this way you would use the "<span>-</span>" altogether after removing it. Is this expected?

    Regards,
    Albert
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. jonathan
    jonathan avatar
    23 posts
    Member since:
    Jun 2008

    Posted 10 Nov 2008 Link to this post

    hi albert,

    <script type="text/javascript">
    OnClientNodeEditing event does not fire. (the alert doesn't get triggered)
    function OnClientDoubleClick_Node(sender, args)
    {
        alert("hi");
        var text = args.get_node().get_textElement().innerHTML;
        while (text.match("<SPAN>-</SPAN>") != null)
        {text = text.replace("<SPAN>-</SPAN>", "");}
        args.get_node().get_textElement().innerHTML = text;
    }
    </script>

            <script type="text/javascript">
            var startEdit = Telerik.Web.UI.RadTreeView.prototype._startEdit;
            Telerik.Web.UI.RadTreeView.prototype._startEdit = function (node)
            {
                this._raiseEvent("nodeEditing", node);
                startEdit.apply(this, arguments);
            }
            </script>

    <telerik:RadTreeView ID="RadTreeView1" runat="server" OnClientContextMenuShowing="ClientContextMenuShowing"
                                EnableDragAndDrop="true" AllowNodeEditing="true" OnClientContextMenuItemClicked='ClientContextMenuItemClicked'
                                OnNodeEdit="RadTreeView1_NodeEdit" ShowLineImages="False"
                                CssClass="RadTreeView" OnClientNodeEditing="OnClientDoubleClick_Node">
                                <ContextMenus>
                                    <telerik:RadTreeViewContextMenu ID="ContextMenu1">
                                        <Items>
                                            <telerik:RadMenuItem Text="edit" Value="Edit">
                                            </telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="move" Value="Move">
                                            </telerik:RadMenuItem>
                                        </Items>
                                    </telerik:RadTreeViewContextMenu>
                                </ContextMenus>
                            </telerik:RadTreeView>



    basically, on the server side event (on load event), i use node.add to add each node and wrap the node.text.

    here is a quick sample: if i wrap the text of a node by 5 characters before placing a break, lets say jonathan was the text of the first node. then the wrapping of text would be jonat<span>-</span><br/>han. the node.text will not display the span and br.
    i wrapped the - in a span, because when the user place - intentionally, it should not be removed when he edits the node.
    since the - is in a span, i can replace the whole span into an empty string when the user edits the node.

    this is what i want to achieve, when the user edits a node, the - should be removed if it was added by the wrapping of text.

    regards,

    jonathan

  4. jonathan
    jonathan avatar
    23 posts
    Member since:
    Jun 2008

    Posted 10 Nov 2008 Link to this post

    hi albert,

    i did not know what made it not work 30minutes ago, but right now i just changed
    args.get_node().get_textElement().innerHTML = text;
    into:
    args.get_node().set_text(text);

    and it seems to be fine right now.

    thanks,
    regards,
    jonathan
  5. jonathan
    jonathan avatar
    23 posts
    Member since:
    Jun 2008

    Posted 10 Nov 2008 Link to this post

    hi again,

    i have a follow up question.

    i would just like to know if there is an equivalent for getting the .get_textElement().innerHTML of the node on the server side?
    because when i use the node.text on load, the span in my text disappears.

    regards,
    jonathan
  6. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 11 Nov 2008 Link to this post

    Hello jonathan,

    The Text property of the treeview should return the correct value and I am not sure why it does not work in your case. I suggest you open a support ticket and send us a sample project which illustrates your scenario.

    Sincerely yours,
    Albert
    the Telerik team

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