CheckBox Tree condition - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: dropdown, dropdownbutton, getRecordsHierarchy, id, jqxDropDownButton, jqxtree, json, Tree, value

This topic contains 3 replies, has 2 voices, and was last updated by Klaus H 10 years, 3 months ago.

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

Author

CheckBox Tree condition Posts

June 12, 2014 at 2:20 pm CheckBox Tree condition #55791

Participant

Hello,

is it possible to use the Tree with checkboxes but not assign a checkbox to every node but only to some nodes, I can identify?

Kind regards
Klaus

June 12, 2014 at 3:41 pm CheckBox Tree condition #55793

Klaus H

Participant

And I have an additional question:

I use a dropdown tree I fill with json data, just like in your example. How can I attach a value to a tree item, the getRecordsHierarchy does not seem to help or in other words, when I look at the selected object in the console, the value of the object is always null and my ids are nowhere to be seen in the object.

Regards
Klaus

June 13, 2014 at 6:25 am CheckBox Tree condition #55813

Dimitar

Participant

Hello Klaus,

1) Unfortunately, this is not supported by jqxTree.

2) Here is an example of a JSON-bound tree inside a dropdownbutton:

<!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>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.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": "$1.3"
                }, {
                    "id": "7",
                    "parentid": "6",
                    "text": "Caffe Americano",
                    "value": "$2.6"
                }, {
                    "id": "8",
                    "text": "Caffe Latte",
                    "parentid": "6",
                    "value": "$12.3"
                }, {
                    "id": "9",
                    "text": "Caffe Mocha",
                    "parentid": "6",
                    "value": "$2.13"
                }, {
                    "id": "10",
                    "text": "Cappuccino",
                    "parentid": "6",
                    "value": "$5.3"
                }, {
                    "id": "11",
                    "text": "Pumpkin Spice Latte",
                    "parentid": "6",
                    "value": "$3"
                }, {
                    "id": "12",
                    "text": "Frappuccino",
                    "parentid": "-1"
                }, {
                    "id": "13",
                    "text": "Caffe Vanilla Frappuccino",
                    "parentid": "12",
                    "value": "$1.33"
                }, {
                    "id": "15",
                    "text": "450 calories",
                    "parentid": "13",
                    "value": "$2.23"
                }, {
                    "id": "16",
                    "text": "16g fat",
                    "parentid": "13",
                    "value": "$0.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' });

                $("#dropDownButton").jqxDropDownButton({ width: 150, height: 25 });
                $('#jqxWidget').on('select', function (event) {
                    var args = event.args;
                    var item = $('#jqxWidget').jqxTree('getItem', args.element);
                    $("#log").html("Item id: " + item.id + ", item value: " + item.value);
                    var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + item.label + '</div>';
                    $("#dropDownButton").jqxDropDownButton('setContent', dropDownContent);
                });
            });
        </script>
        <div id="dropDownButton" style="float: left;">
            <div id='jqxWidget' style="border: none;">
            </div>
        </div>
        <div id="log" style="float: left;">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

June 13, 2014 at 6:54 am CheckBox Tree condition #55817

Klaus H

Participant

Hello Dimitar,

thank you for your feedback, since #1 does not work, I will try using a jqxTreeGrid for that.

As for #2, your example works, my example also works, when I give my properties the name of id and value. I use other names, and for some reason I tried giving additional parameters in the mapping array of getRecordsHierarchy yesterday and it did not work (probably made a mistake), but now that works.

Regards
Klaus

Author

Posts

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

You must be logged in to reply to this topic.