Using jqx-tree with angular and json

[nishiParticipant]

Hi,

Trying to evaluate jq-widgets for use in our application.
Our requirements for jqx-tree are:
a) Tree with checkboxes only at the top level.(seems like this is not doable)
b) Tree with both fixed and dynamic nodes
1) For dynamic nodes, Load on expand (on demand) with JSON response being sent from the server
2) For fixed nodes, dynamically adding or removing parent/child nodes in response to certain events.

Are the above possible?
I cant seem to find an angular sample that works with json. Also, confused with source property and data-adapter – when do u need a data-adapter ?. Can a data-adapter be used with an angular jqx-tree to create it dynamically using data from combined sources (static data + json on demand).
Any pointers/samples would be great.

Thanks

[DimitarParticipant]

Hi nishi,

a) This is not supported, unfortunately.
b) 1) This is demonstrated in the online example Load on Demand with Ajax.
2) There are methods for adding and removing items in the jqxTree API. You can also implement a tree context menu for an easier access to your intended functionality.

jqxDataAdapter is necessary when populating a widget with JSON (and other types of) data. We currently do not have an AngularJS example with a JSON-bound tree. However, you can check out the Grid Binding to JSON demo which shows how to load the data with data adapter and populate a widget (grid).

We also suggest you take a look at the jqxDataAdapter and jQWidgets Integration with AngularJS help topics.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[nishiParticipant]

Thanks Dimitar.

Some followup questions:
1. Can we use jqxDataAdapter when using angular jqx-tree directive or do we need to use <div> and jquery to render tree with json data?
2. Is it possible to customize the following
a) Expand/collapse icons
b) Show dashed lines from parent to child nodes.
c) Different font size/text-style/color for different nodes
3. I checked out the right-context menu sample. Is it possible to have multiple different context menu based on selected node?
4. If the data referred to by the data-adapter changes, is it possible to reload/refresh whole or part of the tree or do we manually add/remove items once the tree is loaded.

Thanks again.

[DimitarParticipant]

Hi nishi,

1. You can use jqx-tree but the data adapter has to be defined in the script. The same can be seen for jqx-grid in the aforementioned demo.
2. a) This is possible. For more information, please refer to the forum topic Different Icons for ‘Expanded / Collapsed’ State.
b) This feature is not supported.
c) This can be achieved, but the tree items would need ids (as in the demo JSON Tree). You can then apply your custom style to specific ids.
3. You can find a solution in the forum topic Dynamic Context menu with jqxTree and AngularJS.
4. You can do this by just resetting the tree’s source property to point to the new data.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts