We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

How to set focus on inserted node

Thread ID:

Created:

Updated:

Platform:

Replies:

120106 Sep 1,2015 03:16 AM Sep 2,2015 08:51 AM ASP.NET MVC 4
loading
Tags: TreeView
Boram Kang
Asked On September 1, 2015 03:16 AM

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
Replied On September 1, 2015 05:35 AM

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
Replied On September 1, 2015 06:33 AM

Oops! I found a typo in my code.

Corrected that typo and code works like a charm!

Thank you! :)



Boram Kang
Replied On September 1, 2015 06:54 AM

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 [Syncfusion]
Replied On September 2, 2015 08:51 AM

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;