jQuery UI Widgets Forums Navigation Tree Two Icons for an Item

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 9 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Two Icons for an Item #60495

    Sankalp
    Participant

    Hi,

    I am creating a Tree that requires me to have two icons, one to determine the state of the item and the other for the type. I currently have a Tree with just one icon. Is there a way to have two icons?

    Thank you,
    Sankalp

    function populateTreePanelTree(DeviceName){
    var source = {
    datatype: “xml”,
    datafields: [{
    name: ‘id’,
    map: ‘DeviceName’
    }, {
    name: ‘DisplayName’,
    map: ‘DisplayName’
    }, {
    name: ‘icon’,
    map: ‘Icon’
    }, , {
    name: ‘DeviceID’,
    map: ‘DeviceID’
    }, {
    name: ‘DeviceParentID’,
    map: ‘DeviceParentID’
    }
    ],
    root: “Devices”,
    record: “Device”,
    id: ‘DeviceID’,
    url: “/webclient/deviceinventory/json/CT” + DeviceName + “TreeData.xml”,
    async: false
    };

    TreedataAdapter = new $.jqx.dataAdapter(source);

    TreedataAdapter.dataBind();
    var records = TreedataAdapter.getRecordsHierarchy(‘DeviceID’, ‘DeviceParentID’, ‘items’, [{
    name: ‘DisplayName’,
    map: ‘label’
    }]);
    treeData = records;
    $(‘#jqxWidget’).jqxTree({ source: records});
    }

    Two Icons for an Item #60506

    Dimitar
    Participant

    Hello sankalp404,

    You can achieve this, but the second icon would have to be added as part of the item’s label. Otherwise, it is not possible. Here is an example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var data = [
                    { "id": "2",
                        "parentid": "1",
                        "text": "Hot Chocolate",
                        "value": "$2.3"
                    }, {
                        "id": "3",
                        "parentid": "1",
                        "text": "Peppermint Hot Chocolate",
                        "value": "$2.3"
                    }, {
                        "id": "4",
                        "parentid": "1",
                        "text": "Salted Caramel Hot Chocolate",
                        "value": "$2.3"
                    }, {
                        "id": "5",
                        "parentid": "1",
                        "text": "White Hot Chocolate",
                        "value": "$2.3"
                    }, {
                        "text": "<img src='../../images/mailIcon.png' />Chocolate Beverage",
                        "id": "1",
                        "parentid": "-1",
                        "value": "$2.3",
                        "icon": "../../images/mailIcon.png"
                    }, {
                        "id": "6",
                        "text": "Espresso Beverage",
                        "parentid": "-1",
                        "value": "$2.3"
                    }, {
                        "id": "7",
                        "parentid": "6",
                        "text": "Caffe Americano",
                        "value": "$2.3"
                    }, {
                        "id": "8",
                        "text": "Caffe Latte",
                        "parentid": "6",
                        "value": "$2.3"
                    }, {
                        "id": "9",
                        "text": "Caffe Mocha",
                        "parentid": "6",
                        "value": "$2.3"
                    }, {
                        "id": "10",
                        "text": "Cappuccino",
                        "parentid": "6",
                        "value": "$2.3"
                    }, {
                        "id": "11",
                        "text": "Pumpkin Spice Latte",
                        "parentid": "6",
                        "value": "$2.3"
                    }, {
                        "id": "12",
                        "text": "Frappuccino",
                        "parentid": "-1"
                    }, {
                        "id": "13",
                        "text": "Caffe Vanilla Frappuccino",
                        "parentid": "12",
                        "value": "$2.3"
                    }, {
                        "id": "15",
                        "text": "450 calories",
                        "parentid": "13",
                        "value": "$2.3"
                    }, {
                        "id": "16",
                        "text": "16g fat",
                        "parentid": "13",
                        "value": "$2.3"
                    }, {
                        "id": "17",
                        "text": "13g protein",
                        "parentid": "13",
                        "value": "$2.3"
                    }, {
                        "id": "14",
                        "text": "Caffe Vanilla Frappuccino Light",
                        "parentid": "12",
                        "value": "$2.3"
                    }]
    
                    // prepare the data
                    var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'id' },
                            { name: 'icon' },
                            { name: 'parentid' },
                            { name: 'text' },
                            { name: 'value' }
                        ],
                        id: 'id',
                        localdata: data
                    };
    
                    // create data adapter.
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    // perform Data Binding.
                    dataAdapter.dataBind();
                    // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
                    // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
                    // specifies the mapping between the 'text' and 'label' fields.  
                    var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
                    $('#jqxWidget').jqxTree({ source: records, width: '300px' });
                });
            </script>
            <div id='jqxWidget'>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Two Icons for an Item #60548

    Sankalp
    Participant

    Hello Dimitar,

    Does this work when the datatype is “xml” and not “json”?

    Thanks,
    Sankalp

    Two Icons for an Item #60579

    Dimitar
    Participant

    Hi Sankalp,

    Unfortunately, this would not work in XML-bound tree. You may, however, add the icon through the updateItem method after the tree has been initialized, e.g.:

    var treeItems = $("#jqxTree").jqxTree('getItems');
    var firstItem = treeItems[0];
    $('#jqxTree').jqxTree('updateItem', firstItem, {
        label: '<img src="../../images/mailIcon.png" />Item'
    });

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.