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

problem with double click event innerHTML of object

5 Answers 80 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
jonathan
Top achievements
Rank 1
jonathan asked on 10 Nov 2008, 02:37 AM
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

5 Answers, 1 is accepted

Sort by
0
Accepted
Atanas Korchev
Telerik team
answered on 10 Nov 2008, 05:52 PM
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.
0
jonathan
Top achievements
Rank 1
answered on 11 Nov 2008, 12:40 AM
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

0
jonathan
Top achievements
Rank 1
answered on 11 Nov 2008, 01:14 AM
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
0
jonathan
Top achievements
Rank 1
answered on 11 Nov 2008, 01:29 AM
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
0
Atanas Korchev
Telerik team
answered on 11 Nov 2008, 05:40 PM
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.
Tags
TreeView
Asked by
jonathan
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
jonathan
Top achievements
Rank 1
Share this question
or