CSS by datafield with JSON data

[eitdhcMember]

I am building a tree from a JSON data source. I am using the getRecordsHierarchy to build the parent/child chain and have mapped my object_id to value and object_name to label. For simplicity, the JSON source has a field “is_active”. Is there a way to set an icon or change CSS for “nodes” where is_active=true? Can’t find any samples for setting icons (or CSS) for JSON data sources, only UL lists.

[DimitarParticipant]

Hello eitdhc,

There is currently no way of setting icons to items when the tree is built from JSON data. However, you may find another way of building the tree useful – using source array, as shown in the demo Events.

Best Regards,
Dimitar

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

[eitdhcMember]

thanks for the quick reply, however, with the dataset I have, building a source array as outlined in your example is not practical.

Upgrade Request –
Using the dataAdapter and getRecordsHierarchy method (awesome upgrade by the way!): allow me to add a datafield to my source array that can be mapped into the tag.

example:

var source =
{
datatype: “json”,
datafields: [
{ name: ‘asset_registry_id’ },
{ name: ‘parent_id’ },
{ name: ‘tree_display_name’ },
{ name: ‘asset_registry_id’ },
{ name: ‘is_approved’ }
],
icon: ‘~/asset_registry/treeimages/1.png’,
id: ‘asset_registry_id’,
localdata: jR.items
}

var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();

var records = dataAdapter.getRecordsHierarchy(‘asset_registry_id’, ‘parent_id’, ‘items’, [{ name: ‘asset_registry_id’, map: ‘value’ }, { name: ‘tree_display_name’, map: ‘label’}, { name: ‘is_approved’, map: ‘data-tree-is-active’}]);

This would allow for custom CSS (and even images) with a simple jQuery .find().each() call after your tree is initialized.

Likewise, { name: ‘my_custom_css_class’, map: ‘class’} could possibly just add my_custom_css_class to the <li class="…." renderer.

Just some thoughts that are based on actual requirements for a current project that would keep me using the jqwidgets tree.

[Author]

Posts