jQWidgets Forums
jQuery UI Widgets › Forums › Navigation › Tree › Loading custom field from Json data
This topic contains 3 replies, has 2 voices, and was last updated by Vinay Reddy 9 years, 3 months ago.
-
Author
-
Hi,
I need to load label and description of a tree child. I am able to load label but could not load description. Please can you check my code and help me out in loading the description.
Code:
<HTML>
<HEAD></HEAD>
<BODY>
<div id=’jqxWidget’>
<div id=”jqxTree”></div>
</div>
<script>
$(‘#jqxTree’).on(‘select’,function (event)
{
var args = event.args;
var item = $(‘#jqxTree’).jqxTree(‘getItem’, args.element);
var label = item.label;
var description = item.description;
alert(label);
alert(description);
});
</script>
</BODY>
</HTML>JavaScript Code:
$(document).ready(function () {
var data = [
{
“id”: “child1”,
“parentid”: “parent”,
“text”: “BandWidth”,
“desc”: “This report displays events on the sources along with event code, severity and description.”
},
{
“id”: “parent”,
“parentid”: “-1”,
“text”: “Device Based Reports”
},
];
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘parentid’ },
{ name: ‘text’ },
{ name: ‘desc’ }
],
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 ‘DisplayName’ field. The last parameter
// specifies the mapping between the ‘DisplayName’ and ‘label’ fields.
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘text’, map: ‘label’},{ name: ‘desc’, map: ‘description’}]);
$(‘#jqxTree’).jqxTree({ source: records, width: ‘300px’});
});Any update on this please.
Hello yennamvinay,
1. One of the options is to use item.value like as item.label as previously remove “name: ‘desc'” and
{ name: 'value', map: 'desc' }
2. Another way is to make changes in records and use item.value again:
var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }, { name: 'desc', map: 'value' }]);
3. Is to usedataAdapter.getrecords();
Please take a look this example: http://jsfiddle.net/hristoxux/1b61nmdv/Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comThanks for the solution, it has worked properly in the given example but when i tried to integrate i am not able to load the description. I am able to load ID and Label but not description. I would appreciate if you can please check my code and let me know where i am wrong.
Thanks.
$.ajax({
type: “GET”,
url: “getGroupsData”,
datafields: [{
name: ‘id’
}, {
name: ‘parentid’
}, {
name: ‘text’
}, {
name: ‘desc’
}],
success: function(result) {
var gridSource = {
localdata: result,
datatype: ‘json’
};
var dataAdapter = new $.jqx.dataAdapter(gridSource);
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{
name: ‘text’,
map: ‘label’
}, {
name: ‘desc’,
map: ‘value’
}]);
$(‘#groupsTree’).jqxTree({
source: records,
width: ‘100%’,
height: ‘100%’
});
}
});$(‘#groupsTree’).on(‘select’, function(event) {
var args = event.args;
var item = $(‘#groupsTree’).jqxTree(‘getItem’, args.element);
var queryName = item.label;
var queryId = item.id;
var description = item.value;
alert(description);
});Response what i am getting from server is:
[{“id”:”565ea97cb9eacf176d2a84da”,”parentid”:”565ea96bb9eacf176d2a84d4″,”text”:”BandWidth”},{“id”:”565e8a35b9eacf176d2a7ee8″,”parentid”:”565ea97cb9eacf176d2a84da”,”text”:”Bandwidth by Hour of Day and Direction”,”desc”:”This report shows the amount of total traffic from sources behind the devices for each hour of the day.”},{“id”:”565e8a28b9eacf176d2a7ee4″,”parentid”:”565ea97cb9eacf176d2a84da”,”text”:”Source and Destination by Direction”,”desc”:”This report provides information on the source and destination IPs segregated by direction (of the traffic) and action taken. The report also shows the count of such events and the amount of data transferred in bytes.”},{“id”:”565e8a2eb9eacf176d2a7ee7″,”parentid”:”565ea97cb9eacf176d2a84da”,”text”:”Source and Destination by Port”,”desc”:”This report provides information on the source and destination IPs segregated by port and protocol. The report also shows the count of such events and the amount of data transferred in bytes”}]
-
AuthorPosts
You must be logged in to reply to this topic.