Custom Icon for Tree Node with JSON Data

[mangeshsinghParticipant]

Hi,
I am using jqxTree with JSON data.I am unable to set icon image for tree nodes.I am using following code for json binding

$(document).ready(function () {
var data = [
{ “id”: “2”,
“parentid”: “1”,
“text”: “Bollinger Bands”,
“value”: “Bollinger Bands”
}, {
“id”: “3”,
“parentid”: “1”,
“text”: “Moving Average”,
“value”: “ma”
}, {
“id”: “4”,
“parentid”: “1”,
“text”: “Parabolic SAR”,
“value”: “Parabolic SAR”
}, {
“id”: “5”,
“parentid”: “1”,
“text”: “Ultimate Oscillator”,
“value”: “Ultimate Oscillator”
}, {
“text”: “Free Indicators”,
“id”: “1”,
“parentid”: “-1”,
“value”: “free”,
“icon”: “../../images/mailIcon.png”
}]

// 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’}]);
$(‘#jqxTree’).jqxTree({ source: records, width: ‘300px’, icon: “stx-loading.gif” });

$(‘#jqxTree’).on(‘select’, function (event) {
var args = event.args;
var item = $(‘#jqxTree’).jqxTree(‘getItem’, args.element);

});
.Please see attached image for reference.
When i am setting icon property then i am getting invalid operation exception

[mangeshsinghParticipant]

Now i am not getting any error but unable to load image

Please see code below

$(document).ready(function () {
var data = [
{ “id”: “2”,
“parentid”: “1”,
“text”: “Bollinger Bands”,
“value”: “Bollinger Bands”,
“icon”: “../Images/Indicator.gif”
}, {
“id”: “3”,
“parentid”: “1”,
“text”: “Moving Average”,
“value”: “ma”,
“icon”: “../Images/Indicator.gif”
}, {
“id”: “4”,
“parentid”: “1”,
“text”: “Parabolic SAR”,
“value”: “Parabolic SAR”,
“icon”: “../Images/Indicator.gif”
}, {
“id”: “5”,
“parentid”: “1”,
“text”: “Ultimate Oscillator”,
“value”: “Ultimate Oscillator”,
“icon”: “../Images/Indicator.gif”
}, {
“text”: “Free Indicators”,
“id”: “1”,
“parentid”: “-1”,
“value”: “free”,
“icon”: “../Images/Indicator.gif”
}]

// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘parentid’ },
{ name: ‘text’ },
{ name: ‘value’ }
],
icon: ‘icon’,
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’}]);
$(‘#jqxTree’).jqxTree({ source: records, width: ‘300px’ });

$(‘#jqxTree’).on(‘select’, function (event) {
var args = event.args;
var item = $(‘#jqxTree’).jqxTree(‘getItem’, args.element);
CustomStudy(item.value);
});

});

function CustomStudy(study) {
if (!stxx || !stxx.chart.dataSet) return;
$$(“studyDialog”).querySelectorAll(“.title”)[0].innerHTML = study;
STXStudies.studyDialog(stxx, study, $$(“studyDialog”));
STXDialogManager.displayDialog(“studyDialog”);
}

$(document).ready(function () {
function singleClick(event) {
var _item = event.target;
if (_item.tagName != “LI”) {
_item = $(_item).parents(“li:first”);
};
var item = $(‘#jqxTree’).jqxTree(‘getItem’, _item[0]);
if (item.isExpanded == true) {
$(‘#jqxTree’).jqxTree(‘collapseItem’, _item[0]);
} else {
$(‘#jqxTree’).jqxTree(‘expandItem’, _item[0]);
};
};
function doubleClick(event) {
var text = event.target.textContent;
var text2 = text.replace(/\s+/g, ‘ ‘);
alert(text2);
};
$(“#jqxTree .jqx-tree-item”).click(function (event) {
var that = this;
setTimeout(function () {
var dblclick = parseInt($(that).data(‘double’), 10);
if (dblclick > 0) {
$(that).data(‘double’, dblclick – 1);
} else {
singleClick.call(that, event);
}
}, 300);
}).dblclick(function (event) {
$(this).data(‘double’, 2);
doubleClick.call(this, event);
});
});

[DimitarParticipant]

Hello mangeshsingh,

Please check out the following forum example to see how to correctly display icons in a JSON tree: http://www.jqwidgets.com/community/topic/icon-in-json-data-tree/#post-50965.

Best Regards,
Dimitar

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

[Author]

Posts