How to add Custom attribute in li - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: angular tree, custom, custom attribute, custom data, custom field, data, field, jquery tree, jqxtree, Tree, value

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 Posts

May 22, 2015 at 4:33 pm 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

May 25, 2015 at 6:09 am 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/

May 26, 2015 at 5:13 am 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

May 26, 2015 at 12:46 pm 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/

May 27, 2015 at 2:08 pm How to add Custom attribute in li #71666

SumitRoy

Participant

thanks a lot sir.

thanks & regards
SumitRoy

Author

Posts

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

You must be logged in to reply to this topic.