How to set focus on inserted node

4 Replies
2 Participants

Created by
BK Boram Kang

Platform
ASP.NET MVC

Platform
ASP.NET MVC

Control
TreeView

Created On
Sep 1, 2015 07:16 AM UTC

Last Activity On
Sep 2, 2015 12:51 PM UTC

Want to subscribe?
SIGN IN

Hello,

I've done adding new item by call addNode() method on treeview and set focus on the item like below.

function onAddNew() {
    var treeview = $("#treeView").data("ejTreeView");
    var newText = "New Item" + count++;
    var newNode = treeview.addNode(newText);
    treeview.selectNode(newText);
}

But it seems like the last line of code is not working.

I guess i can't select node by text but i have no idea.

I have checked online samples and forums and KB but it didn't help.

Could you shed some light on this problem?

Thank you :)

4 Replies

BK Boram Kang September 1, 2015 09:35 AM UTC

Hello,

I did some further research, and found this example using knockoutjs.

But when i tried to find a node by code below,

var treeobj = $("#treeView").data("ejTreeView");
var node = treeobj.selectNode($("#" + self.pid()));
treeview.expandNode(node);

i got an error that 'treeobj' is null.

What't wrong with this code??? :(

BK Boram Kang September 1, 2015 10:33 AM UTC

Oops! I found a typo in my code.

Corrected that typo and code works like a charm!

Thank you! :)

BK Boram Kang September 1, 2015 10:54 AM UTC

I have another questions but i'm afraid of writing too many thread on forum, so let me continue reply on this thread! :)

1. I'm still researching knockoutjs treeview sample. The code below is my treeview definition.

<div id="treeview" data-bind="ejTreeView: {fields :{ dataSource: treeitems,id:'_id',text:'_name',hasChild:'hasChild',expanded:'expanded',parentId:'_pid'}, allowDragAndDrop: true} ">
</div>

How can attach javascript event, say nodeSelect and nodeDropped, on this treeview?

2. I want to place 'Delete' button beside treeview and i want the button be enabled only when any node is selected.

And i want to that by knockoutjs way by "enable: ~~~".

Could you help me out please? :)

BP Balamurugan P Syncfusion Team September 2, 2015 12:51 PM UTC

Hi Boram,

Thanks for contacting syncfusion support

Query 1: In tree view, I can't select node by text

At present we cannot select the node using text. To select tree node, you have to use the ID of corresponding node or node element. Please refer to the below code example to select newly added tree node.

Code example [JavaScript]:

var treeview = $("#treeview").data("ejTreeView");

var newText = "NewItem" + count++;

var newnode = { id: newText, name: newText };

treeview.addNode(newnode);

treeview.selectNode($("#" + newText));

Query 2: How can attach javascript event, say nodeSelect and nodeDropped, on this treeview knockout sample?

In tree view knockout, we can attach the tree view events like other API Members of tree view. In the below code example, we have specified “nodeSelect” and “nodeDropped” treeview event for your reference.

Code example[HTML]

function onSelect(args) {

// event handling codes

}

function onDropped(args) {

// event handling codes

}

</script>

Query3: I want to place 'Delete' button beside treeview and I want the button be enabled only when any node is selected and I want to that by knockoutjs way by "enable: ~~~".

As shown in the below code example, we need to render button with disabled mode and have to enable this button at the time of treeview “nodeSelect” event.

Code example[HTML]

<button id="Button1" data-bind="ejButton:{enabled: false, click:'onDelete'}" >Delete</button>