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. Image for the cookie policy date

Populate ejTree and set custom atributes

Good morning,

I need to populate an ejTree completely from code, fo this purpose I create an empty ejTree and fill it using addNode:

$tree.ejTreeView({ height: 150 });

$tree.data('ejTreeView').addNode('demo');

$tree.data('ejTreeView').addNode('demo 1');


The result is not as expected because I see and empty tree, I think the issue is because there isn't a root, but I don't have it.

In the attachment there is a live example.

I need to populate some nodes, in the code i see an addNodes function, can you document and publish it?

Last question, I need to set some custom attribute on each node in order to use them, how can I do that? There is something like ejGrid customAttributes?

Kind regards,
Irvin Dominin


Attachment: TreeViewSample_364c57db.zip

3 Replies

KC Kasithangam C Syncfusion Team January 30, 2015 05:05 PM UTC

Hi Irvin,

Query 1: Need to populate empty ejTree and fill it using addNode:

We were able to reproduce the issue “”and we considered this requirement “Render treenode by using addNode function” as bug, also have logged a report regarding this. A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Query2: I need to populate some nodes, in the code i see an addNodes function, can you document and publish it?

We would like to let you know that, we have showcased the getting started of all our components in the below specified link,

http://help.syncfusion.com/js

And we have also explained how to use properties, methods and events of our tools component in the below link, Please find the link for the same,

http://help.syncfusion.com/cr/js

 

In this above link, you can find the addNode function for the treeview control.

Query 3: need to set some custom attribute on each node in order to use them, how can I do that?

We have an option for differentiate the treeview nodes by using “htmlAttribute” property. “HtmlAttribute” is one of the member in “fields” property. The value specified for the “htmlAttribute” will be included to the corresponding treenode.

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

Treeview Sample

In this sample, we have set the class value in “htmlAttribute” property and define the styles for this class to set specific styles in treeview nodes. In the way differentiate the treeview nodes you can set the value in “htmlAttribute” property. Please refer the below code to define the class value in the “htmlAttribute”.

{ id: 1, name: "Discover Music", hasChild: true,htmlAttribute:nodeStyle },

Now during control creation, map it to the “htmlAttribute” in fields as shown below

$("#treeView").ejTreeView(

           {

               fields: { id: "id", parentId: "pid", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded",htmlAttribute:"htmlAttribute"}

           }

Defining styles for the class that we specified as shown below,

<script>

    var nodeStyle = { "class": "mystyle", "style": "border:2px solid red" };

</script>

Also to know more about our components, please refer the online help documentation: http://help.syncfusion.com/cr/js

Please let us know if you have further queries,

Regards,

Kasithangam




ID Irvin Dominin replied to Kasithangam C February 2, 2015 07:51 AM UTC

Hi Irvin,

Query 1: Need to populate empty ejTree and fill it using addNode:

We were able to reproduce the issue “”and we considered this requirement “Render treenode by using addNode function” as bug, also have logged a report regarding this. A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Query2: I need to populate some nodes, in the code i see an addNodes function, can you document and publish it?

We would like to let you know that, we have showcased the getting started of all our components in the below specified link,

http://help.syncfusion.com/js

And we have also explained how to use properties, methods and events of our tools component in the below link, Please find the link for the same,

http://help.syncfusion.com/cr/js

 

In this above link, you can find the addNode function for the treeview control.

Query 3: need to set some custom attribute on each node in order to use them, how can I do that?

We have an option for differentiate the treeview nodes by using “htmlAttribute” property. “HtmlAttribute” is one of the member in “fields” property. The value specified for the “htmlAttribute” will be included to the corresponding treenode.

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

Treeview Sample

In this sample, we have set the class value in “htmlAttribute” property and define the styles for this class to set specific styles in treeview nodes. In the way differentiate the treeview nodes you can set the value in “htmlAttribute” property. Please refer the below code to define the class value in the “htmlAttribute”.

{ id: 1, name: "Discover Music", hasChild: true,htmlAttribute:nodeStyle },

Now during control creation, map it to the “htmlAttribute” in fields as shown below

$("#treeView").ejTreeView(

           {

               fields: { id: "id", parentId: "pid", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded",htmlAttribute:"htmlAttribute"}

           }

Defining styles for the class that we specified as shown below,

<script>

    var nodeStyle = { "class": "mystyle", "style": "border:2px solid red" };

</script>

Also to know more about our components, please refer the online help documentation: http://help.syncfusion.com/cr/js

Please let us know if you have further queries,

Regards,

Kasithangam



Query 1: Need to populate empty ejTree and fill it using addNode:
Ok.

Query2: I need to populate some nodes, in the code i see an addNodes function, can you document and publish it?

Yes I read all the docs deeply, the reason why I want to use addNodes because I preferer to pass a well structured tree item object instead of a simple text; can this be done?

Query 3: need to set some custom attribute on each node in order to use them, how can I do that?

Is not simply a styling issue, I have to set some jQuery prop on each node. The solution I found is to set them to the DOM element right after is attached to the DOM using addNode method. Is this a good solution?


KC Kasithangam C Syncfusion Team February 3, 2015 12:05 PM UTC

Hi Irvin,

Please follow the incident, which has been created under your account and log on to our support website to check for further updates.

Kindly let us know if you have further queries.

Regards,

Kasithangam



Loader.
Live Chat Icon For mobile
Up arrow icon