Clicking on text of node in edit mode

[Mallverkstan]

Is there a way that when I click on the text of a node in edit mode, it is not taken out of edit mode?

I've tried to retrieve the node as a DOM input object in EditStart handler, move this input object to outside the anchor object, and in EditEnd put it back after edit is finished -- but it led to some problems, and in one major browser the input element lost focus after I first moved it.

Thanks,
Fredrik
Mallverkstan

[Atanas Korchev]

Hi Mallverkstan,

RadTreeView should keep the edited node in edit mode when the user clicks inside the textbox. What exactly is the problem you are having? How can we reproduce it on our online demo?

Sincerely yours,
Albert
the Telerik team

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

[Mallverkstan]

Hi Albert,

The nodes in your online demo are not links.

Where you have
       <span class="rtIn">Children's Books</span>
I have
    <a class="rtIn" target="content" href="content.aspx?id_catalogue=1&data_id_node=10872&id_category=PRODUKT&tree_id_node=10872" title="Produkt «Ny produkt»">Ny produkt</a>

The textbox <input type="text" size="13" Value="Ny Produkt"> is added inside the anchor tag, and the anchor's href is fired on click. The opened page then takes focus from the tree.

Regards,
Fredrik
Mallverkstan

[Atanas Korchev]

Hello Mallverkstan,

We should probably add this case to one of the unsupported scenarios as the user cannot edit a node by clicking it if the NavigateUrl property is set. I guess you are using the keyboard to enter edit mode. Anyway you can use this code to enable clicking in the textbox:
            <script type="text/javascript">
            function nodeEditStart(sender, args)
            {
                var node = args.get_node();
                node.url = node.get_navigateUrl();
                node.get_linkElement().href = "javascript:void(0)";   
            }
           
            function nodeEdited(sender, args)
            {
                var node = args.get_node();
                node.get_linkElement().href = node.url;
            }
            </script>

            <telerik:RadTreeView ID="radTreeView" runat="server" AllowNodeEditing="true" OnClientNodeEditStart="nodeEditStart"
                OnClientNodeEdited="nodeEdited">
However you need to be using the current official release in order to have the ClientNodeEditStart event.

Sincerely yours,
Albert
the Telerik team

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

[Mallverkstan]

Thanks for the reply,

It doesn't really work though.
In Internet Explorer, it doesn't load a new page, but I can't position the caret in the textbox.
In Firefox, the node goes back to normal mode on click.

I think my original suggestion worked better: to temporary remove the input to just outside the anchor, and then move it back after editing. But, as mentioned, I couldn't get that to work.

I've also tried to disable the anchor link (<a disabled="disabled">), but the node still lost focus on click.

As a sidenote, in my project I set the node to edit mode through the context menu. But -- until I turned if off -- it did work to edit the text by clicking it, probably because my tree is in an old-fashioned frame. Still, I turned off node edit on click because when a new page loads, it may steal focus from the tree and then the node goes back.

It isn't a big problem for me, I just wanted to check if you knew a solution. I'll leave the question open for a while.

Thanks and regards,
Fredrik
Mallverkstan