jQuery UI Widgets Forums Navigation Tree CSS by datafield with JSON data

This topic contains 2 replies, has 2 voices, and was last updated by  eitdhc 11 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • CSS by datafield with JSON data #20703


    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.

    CSS by datafield with JSON data #20728


    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,

    jQWidgets team

    CSS by datafield with JSON data #20965


    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.


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

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.