Tree not working with ASP.NET MVC 4

[danarjParticipant]

Hello
I have a problem I am using tree and my datasource is json loaded from database in asp.net mvc controller but the tree will not show the nodes but the json is loading with no error because I can see it in the firebug console.
<script type=”text/javascript”>

$(document).ready(function () {
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘Id’ },
{ name: ‘ParentId’ },
{ name: ‘Text’ },
{ name: ‘Value’ }
],
id: ‘Id’,
url : ‘@Url.Action(“NodeTree”)’
};
// 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’ });
});
</script>
<div id=’jqxWidget’>
</div>
server side:
public JsonResult NodeTree()
{
using (var context = new HREntities())
{
List<TreeNodeJson> listTreeNodeJson = new List<TreeNodeJson>();
TreeNodeJson treeNodeJson = new TreeNodeJson { Id = 0, ParentId = -1, Text = “Gorannet.”, Value = “0” };
listTreeNodeJson.Add(treeNodeJson);
var queryLocation = (from l in context.HR_LOCATION_TBL
select new { l.LOCATION_ID, l.LOCATION_NAME });
foreach (var record in queryLocation)
{
listTreeNodeJson.Add(new TreeNodeJson { Id = record.LOCATION_ID, ParentId = 0, Text = record.LOCATION_NAME, Value = record.LOCATION_ID.ToString() });
}
var queryAttendaceDevice = (from a in context.HR_ATTENDANCE_DEVICE_TBL
select new { a.DEVICE_ID, a.DEVICE_NAME, a.LOCATION_ID });
foreach (var record in queryAttendaceDevice)
{
listTreeNodeJson.Add(new TreeNodeJson { Id = record.DEVICE_ID, ParentId = record.LOCATION_ID, Text = record.DEVICE_NAME, Value = record.DEVICE_ID.ToString() });
}
return Json(listTreeNodeJson, JsonRequestBehavior.AllowGet);
}

}
Firebug console:
[{"Id":0,"ParentId":-1,"Text":"Gorannet.","Value":"0"},{"Id":1,"ParentId":0,"Text":"faruq group","Value":"1"},{"Id":2,"ParentId":0,"Text":"Shorsh St. 15 - Bldg. No.3 ","Value":"2"},{"Id":3,"ParentId":0,"Text":"Zargata","Value":"3"},{"Id":4,"ParentId":0,"Text":"Rizgary","Value":"4"},{"Id":1,"ParentId":1,"Text":"Device 1","Value":"1"}]

[Peter StoevKeymaster]

Hi danarj,

The problem in that code is that when you call `var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘text’, map: ‘label’ }]);
`, the binding is not yet completed. The solution is: set async: false of the source object or create the jqxTree in the dataAdapter’s loadComplete callback function.

Best Regards,
Peter Stoev

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

[Author]

Posts