Tree view node types & storing data on nodes

[noelisdadParticipant]

I am trying to implement your treeview control, and have two questions:

1. I do not see anywhere to specify different node *types*, such as different folder types, different leaf types, etc. I notice that the only properties in the demo specified are id, parent id, and text. Is there a way to specify different node types, and to display different icons depending on the node/leaf type.
2. We were using jstree, before we decided it was just too buggy. One of the things we liked about jstree, though (including the different node types above) was the ability to store extra information along with each treeview item/node, such as the associated data record, or other extra information. Would the recomendation be to store this information in the dataadapter used as the source?

Is there any way to accomplish the above using jqtree? Please let me know as I want to convert to your control from jstree, but cannot until we can at least mimic the above actions.

[Peter StoevKeymaster]

Hi noelisdad,

– There are currently no node types in our Tree. We will consider adding such feature in the future.
– The information that a node can store should be in String format in this version. Each node in jqxTree has a “value” property. The “value” can be only String.

Example:

            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', theme: theme });

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[noelisdadParticipant]

I guess we could store a well formed json string in the value and convert it to an object when needed using jQuery.parseJSON( jsonString );

We’ll test that out. Thanks Peter

[andyhMember]

Hi NoelisDad

Any idea when you will have time to add these two features? We are also looking to use the tree in our project, but need a *separate* field other than ‘value’ to store info associatated w/that node, and we also need to have node types…nothing fancy, just the ability to display different icons per node type…

[Author]

Posts