jQWidgets Forums

Tagged: treegrid

This topic contains 1 reply, has 1 voice, and was last updated by Sairam 10 years, 7 months ago.

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

Author

TreeGrid doesn't display my data .. Please Help ! Posts
November 17, 2014 at 5:45 am TreeGrid doesn't display my data .. Please Help ! #62815

Sairam
Participant

Hi,

I have a TreeGrid that should display a hierarchical data, while it displays the top parent node correctly the child records are not displayed. Please help. I have put in the code below.

`<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>
</title>

<link rel=”stylesheet” href=”JQFiles/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”JQFiles/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxdatatable.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxtreegrid.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxslider.js”></script>
<script type=”text/javascript” src=”JQFiles/scripts/demos.js”></script>
<script type=”text/javascript” src=”JQFiles/demos/sampledata/generatedata.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var data = [
{
“id”: “1”, “FB”: “Over Current”, “Group1”: “”, “Group2”: “”, “Group3”: “”, “Group4”: “”, “Group5”: “”, “Group6”: “”, “Group7”: “”, “Group8”: “”,
“children”:
{
“child”:
[
{ “id”: “2”, “FB”: “Status”, “Group1”: “1”, “Group2”: “2”, “Group3”: “3”, “Group4”: “4”, “Group5”: “5”, “Group6”: “6”, “Group7”: “7”, “Group8”: “8” },
{ “id”: “3”, “FB”: “Function”, “Group1”: “1”, “Group2”: “2”, “Group3”: “3”, “Group4”: “4”, “Group5”: “5”, “Group6”: “6”, “Group7”: “7”, “Group8”: “8” }
]
}
},
{
“id”: “8”, “FB”: “Distance Setup”, “Group1”: “-“, “Group2”: “-“, “Group3”: “-“, “Group4”: “-“, “Group5”: “-“, “Group6”: “-“, “Group7”: “-“, “Group8”: “-“,
“children”:
{
“child”:
[
{ “id”: “9”, “FB”: “Status”, “Group1”: “1”, “Group2”: “2”, “Group3”: “3”, “Group4”: “4”, “Group5”: “5”, “Group6”: “6”, “Group7”: “7”, “Group8”: “8” }

]
}
}
];

var source =
{
dataType: “json”,
dataFields: [
{ name: “id”, type: “number” },
{ name: “FB”, type: “string” },
{ name: “Group1”, type: “string” },
{ name: “Group2”, type: “string” },
{ name: “Group3”, type: “string” },
{ name: “Group4”, type: “string” },
{ name: “Group5”, type: “string” },
{ name: “Group6”, type: “string” },
{ name: “Group7”, type: “string” },
{ name: “Group8”, type: “string” }
],

hierarchy:
{
root: “children>child”
},
localData: data,
id: “id”
};

var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
//alert(‘Load Complete’);

}
});

$(“#treeGrid”).jqxTreeGrid(
{
sortable: false,
checkboxes: true,
columnsReorder: true,
width: 900,
source: dataAdapter,
altrows: false,
autoRowHeight: false,
ready: function () {
// Expand rows with ID = 1, 2 and 7
//$(“#treeGrid”).jqxTreeGrid(‘expandRow’, 1);
//$(“#treeGrid”).jqxTreeGrid(‘expandRow’, 2);
//$(“#treeGrid”).jqxTreeGrid(‘expandRow’, 3);
},
editable: true,
columns: [
{ text: ‘ID’, editable: false, dataField: ‘id’, pinned: true, width: 150 },
{ text: ‘Functional Block’, editable: false, pinned: true, dataField: ‘FB’, width: 200 },
{
text: ‘Group 1’, dataField: ‘Group1’, width: 250, columnType: “template”,
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
var source = [“Select”, “Enabled”, “Bisabled”, “Enabled VTS”,
“Enabled CH Fail”];
editor.jqxDropDownList({ autoDropDownHeight: true, source: source, width: ‘100%’, height: ‘100%’ });
},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
editor.jqxDropDownList(‘selectItem’, cellvalue);
},
getEditorValue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}

},
{
text: ‘Group 2’, dataField: ‘Group2’, width: 250, columnType: “template”,
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
var source = [“Select”, “Enabled”, “Bisabled”, “Enabled VTS”,
“Enabled CH Fail”];
editor.jqxDropDownList({ autoDropDownHeight: true, source: source, width: ‘100%’, height: ‘100%’ });
},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
editor.jqxDropDownList(‘selectItem’, cellvalue);
},
getEditorValue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}

},
{
text: ‘Group 3’, dataField: ‘Group3’, width: 250, columnType: “template”,
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
var source = [“Select”, “Enabled”, “Bisabled”, “Enabled VTS”,
“Enabled CH Fail”];
editor.jqxDropDownList({ autoDropDownHeight: true, source: source, width: ‘100%’, height: ‘100%’ });
},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
editor.jqxDropDownList(‘selectItem’, cellvalue);
},
getEditorValue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}

},
{
text: ‘Group 4’, dataField: ‘Group4’, width: 250, columnType: “template”,
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
var source = [“Select”, “Enabled”, “Bisabled”, “Enabled VTS”,
“Enabled CH Fail”];
editor.jqxDropDownList({ autoDropDownHeight: true, source: source, width: ‘100%’, height: ‘100%’ });
},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
editor.jqxDropDownList(‘selectItem’, cellvalue);
},
getEditorValue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}

},
{
text: ‘Group 5’, dataField: ‘Group5’, width: 250, columnType: “template”,
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
var source = [“Select”, “Enabled”, “Bisabled”, “Enabled VTS”,
“Enabled CH Fail”];
editor.jqxDropDownList({ autoDropDownHeight: true, source: source, width: ‘100%’, height: ‘100%’ });
},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
editor.jqxDropDownList(‘selectItem’, cellvalue);
},
getEditorValue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}

},
{
text: ‘Group 6’, dataField: ‘Group6’, width: 250, columnType: “template”,
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
var source = [“Select”, “Enabled”, “Bisabled”, “Enabled VTS”,
“Enabled CH Fail”];
editor.jqxDropDownList({ autoDropDownHeight: true, source: source, width: ‘100%’, height: ‘100%’ });
},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
editor.jqxDropDownList(‘selectItem’, cellvalue);
},
getEditorValue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}

},
{
text: ‘Group 7’, dataField: ‘Group7’, width: 250, columnType: “template”,
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
var source = [“Select”, “Enabled”, “Bisabled”, “Enabled VTS”,
“Enabled CH Fail”];
editor.jqxDropDownList({ autoDropDownHeight: true, source: source, width: ‘100%’, height: ‘100%’ });
},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
editor.jqxDropDownList(‘selectItem’, cellvalue);
},
getEditorValue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}

},
{
text: ‘Group 8’, dataField: ‘Group8’, width: 250, columnType: “template”,
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
var source = [“Select”, “Enabled”, “Bisabled”, “Enabled VTS”,
“Enabled CH Fail”];
editor.jqxDropDownList({ autoDropDownHeight: true, source: source, width: ‘100%’, height: ‘100%’ });
},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
editor.jqxDropDownList(‘selectItem’, cellvalue);
},
getEditorValue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}

}

]
});

var listSource = [{ label: ‘Group 1’, value: ‘Group1’, checked: true }, { label: ‘Group 2’, value: ‘Group2’, checked: true },
{ label: ‘Group 3’, value: ‘Group3’, checked: true }, { label: ‘Group 4’, value: ‘Group4’, checked: true }, { label: ‘Group 5’, value: ‘Group5’, checked: true },
{ label: ‘Group 6’, value: ‘Group6’, checked: true }, { label: ‘Group 7’, value: ‘Group7’, checked: true }, { label: ‘Group 8’, value: ‘Group8’, checked: true}];
$(“#jqxlistbox”).jqxListBox({ source: listSource, width: 300, height: 75, checkboxes: true });
$(“#jqxlistbox”).on(‘checkChange’, function (event) {
$(“#treeGrid”).jqxTreeGrid(‘beginUpdate’);
if (event.args.checked) {
$(“#treeGrid”).jqxTreeGrid(‘showColumn’, event.args.value);
} else {
$(“#treeGrid”).jqxTreeGrid(‘hideColumn’, event.args.value);
}
$(“#treeGrid”).jqxTreeGrid(‘endUpdate’);
});

//This will hide the ID column on page load. The ID column can be used for programmatic purpose
$(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘id’);
// $(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘Group4’);
// $(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘Group5’);
// $(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘Group6’);
// $(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘Group7’);
// $(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘Group8’);
// $(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘Group9′);
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<table>
<tr>
<td>
<div style=”float: left;” id=”jqxlistbox”></div>
</td>
</tr>
<tr>
<td>
<div id=”treeGrid”></div>
</td>
</tr>
</table>
</div>

</body>

</html>

November 17, 2014 at 6:04 am TreeGrid doesn't display my data .. Please Help ! #62816

Sairam
Participant

Solved it.

I missed to mention the children in the dataFields section.

Thanks anyway.
Author

Posts

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

You must be logged in to reply to this topic.