How to set focus on inserted node

[Boram Kang]

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 :)

[Boram Kang]

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??? :(

[Boram Kang]

Oops! I found a typo in my code.

Corrected that typo and code works like a charm!

Thank you! :)

[Boram Kang]

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? :)

[Balamurugan P]

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]

<div id="treeview" data-bind="ejTreeView: {fields :{ dataSource: dataSource,id:'id',text:'name',hasChild:'hasChild',expanded:'expanded',parentId:'pid'}, allowDragAndDrop: true, nodeSelect:'onSelect', nodeDropped:'onDropped' } "></div>  

<script type="text/javascript">

              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>                               

<script type="text/javascript">

//treeview "nodeSelect" select event calls this method

function onSelect(args) {            

                 //button will be anabled

                  $("#Button1").ejButton({enabled: true});                        

        }

</script>

We have prepared a sample based on this and you can find the sample under the following location:

Sample : http://www.syncfusion.com/downloads/support/forum/120106/ze/Treeview968798673

Please refer below online link to know more details

Online link:  http://docs.syncfusion.com/

Please let us know if this helps.

Regards,

Balamurugan