problem with double click event innerHTML of object

[jonathan]

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

[Atanas Korchev]

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.

[jonathan]

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

[jonathan]

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

[jonathan]

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

[Atanas Korchev]

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.