jQuery UI Widgets Forums Navigation Tree How to add Custom attribute in li

This topic contains 4 replies, has 2 voices, and was last updated by  SumitRoy 9 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • How to add Custom attribute in li #71487

    SumitRoy
    Participant

    Hi jqxTeam,
    I am using your example http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/index.htm#demos/jqxtree/treebindingtojson.htm.
    All works fine, but I am curious to know is there any way to add custom data attribute like say nodeKey=”some value”
    how can I do this for JSON based tree.
    as per your example there is a field value,
    {
    “id”: “2”,
    “parentid”: “1”,
    “text”: “Hot Chocolate”,
    “value”: “$2.3”;
    }
    I still dont know where this value is used, but like value if I am able to add my custom attribute that would be great. Can you please help me like my past posts.

    thanks in advance
    Sumit Roy

    How to add Custom attribute in li #71506

    Dimitar
    Participant

    Hi Sumit Roy,

    The purpose of the value field is for custom data storage. You can use it instead of the custom attribute.

    Best Regards,
    Dimitar

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

    How to add Custom attribute in li #71546

    SumitRoy
    Participant

    Thanks for the reply,
    can you please demonstrate with an example, at least show me how can add custom attribute using value to tree so that it is available in its dom.

    thanks
    sumit roy

    How to add Custom attribute in li #71578

    Dimitar
    Participant

    Hello Sumit Roy,

    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.11.1.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": "Chocolate Beverage",
                        "id": "1",
                        "parentid": "-1",
                        "value": "$2.3"
                    }, {
                        "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: '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' });
    
                    var items = $('#jqxWidget').jqxTree('getItems');
                    $.each(items, function (index, item) {
                        $(item.element).attr('nodeKey', item.value);
                    });
    
                    $('#jqxWidget').on('select', function (event) {
                        var args = event.args;
                        var item = $('#jqxWidget').jqxTree('getItem', args.element);
                        var label = item.label;
                        var value = item.value;
                        alert('The value of ' + label + ' is ' + value + '.');
                    });
                });
            </script>
            <div id='jqxWidget'>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    How to add Custom attribute in li #71666

    SumitRoy
    Participant

    thanks a lot sir.

    thanks & regards
    SumitRoy

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

You must be logged in to reply to this topic.