jQWidgets Forums

Tagged: jQuery TreeView, jqxtree, Tree

This topic contains 3 replies, has 2 voices, and was last updated by talfirevic 12 years, 3 months ago.

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

Author

getItem returning null Posts

February 11, 2013 at 2:37 pm getItem returning null #15012

talfirevic

Member

Howdy,

let me get straight to the point: Here is the code:

$.ajax({
url: ‘/Product/GetCategoryTree’,
method: ‘GET’,
cache: ‘false’,
success: function (data) {
var builddata = function() {
var source = [];
var items = [];
// build hierarchical source.
for (i = 0; i < data.data.length; i++) {
var item = data.data[i];
var label = item["text"];
var parentid = item["parentid"];
var id = item["id"];

if (items[parentid]) {
var item = { parentid: parentid, label: label, item: item };
if (!items[parentid].items) {
items[parentid].items = [];
}
items[parentid].items[items[parentid].items.length] = item;
items[id] = item;
} else {
items[id] = { parentid: parentid, label: label, item: item };
source[id] = items[id];
}
}
return source;
};
var source = builddata();

$("#jqxMenu").jqxTree({ source: source, width: '300', theme: 'metro' }).on('select',
function (event) {
var args = event.args;
var item = $(‘#jqxTree’).jqxTree(‘getItem’, args.element);
var label = item.label;
alert(label);
});

So… tree is being rendered and select event is being raised but $(‘#jqxTree’).jqxTree(‘getItem’, args.element) returns null.

I’m obviously doing something wrong.

That would be ?

jquery: 1.8.3
browser: Chrome (latest)
jQwidgets: 2.7.0

Cheers,
T.

February 11, 2013 at 2:55 pm getItem returning null #15016

Peter Stoev

Keymaster

Hi talfirevic,

In the provided code, you initialize the jqxTree widget from a DIV tag with ID=”jqxMenu”. However, you call the “getItem” method for an element with id=”jqxTree”. According to me, you should use “jqxMenu” instead.

Here is a sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.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 theme = getDemoTheme();
                var data = [
                { "id": "2",
                    "parentid": "1",
                    "text": "Hot Chocolate"
                }, {
                    "id": "3",
                    "parentid": "1",
                    "text": "Peppermint Hot Chocolate"
                }, {
                    "id": "4",
                    "parentid": "1",
                    "text": "Salted Caramel Hot Chocolate"
                }, {
                    "id": "5",
                    "parentid": "1",
                    "text": "White Hot Chocolate"
                }, {
                    "text": "Chocolate Beverage",
                    "id": "1",
                    "parentid": "-1"
                }, {
                    "id": "6",
                    "text": "Espresso Beverage",
                    "parentid": "-1"
                }, {
                    "id": "7",
                    "parentid": "6",
                    "text": "Caffe Americano"
                }, {
                    "id": "8",
                    "text": "Caffe Latte",
                    "parentid": "6"
                }, {
                    "id": "9",
                    "text": "Caffe Mocha",
                    "parentid": "6"
                }, {
                    "id": "10",
                    "text": "Cappuccino",
                    "parentid": "6"
                }, {
                    "id": "11",
                    "text": "Pumpkin Spice Latte",
                    "parentid": "6"
                }, {
                    "id": "12",
                    "text": "Frappuccino",
                    "parentid": "-1"
                }, {
                    "id": "13",
                    "text": "Caffe Vanilla Frappuccino",
                    "parentid": "12"
                }, {
                    "id": "15",
                    "text": "450 calories",
                    "parentid": "13"
                }, {
                    "id": "16",
                    "text": "16g fat",
                    "parentid": "13"
                }, {
                    "id": "17",
                    "text": "13g protein",
                    "parentid": "13"
                }, {
                    "id": "14",
                    "text": "Caffe Vanilla Frappuccino Light",
                    "parentid": "12"
                }]
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' }
                    ],
                    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 }).on('select', function (event) {
                    var args = event.args;
                    var item = $('#jqxWidget').jqxTree('getItem', args.element);
                });
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 11, 2013 at 2:58 pm getItem returning null #15017

talfirevic

Member

oh my, /facepalm.

I genuinely feeling shame right now.

Thanks Peter!

Cheers,
T.

February 11, 2013 at 3:19 pm getItem returning null #15018

talfirevic

Member

One more thing,

is there a way to get to the items id property that came from that json object since item.id now is html attribute id that does not correspond to the one from json source?

Cheers,
T.

Author

Posts

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

You must be logged in to reply to this topic.