TreeGrid with Nested Json

[chradhaParticipant]

Hi

I have created a nested JSON from an unsupported xml format. I have followed the section “Data Binding to Nested JSON” from TreeGrid examples.

But for some reason i am getting this exception “Uncaught TypeError: Cannot read property ‘toString’ of undefined”.

Below is my code:
————————————————————————————————————

$(document).ready(function () {          
            // prepare the data
            var url = "../sampledata/data.xml";
			var table_names_object_array = new Array();
			var rows_all_tables_array = new Array();
			var rows_all_table_wise_json_array = new Array();
			var dataAdapter_table;
			var source_tables;
			var rows_all_table_wise_json;
					//
			
			var dataFields_table = [ { name : 'tablename' }, { name : 'name' }, { name : 'type' }, { name : 'description' } ];
			$.ajax({
				type : "GET",
				url : url,
				dataType : "xml",
				success : function(xml) {
					$(xml).find("tables").find("table").each(function() {
						var tablename = $(this).attr("name");
						var tabledescription = $(this).attr("description");
						$(this).find("field").each(function() {
							var name = $(this).attr("name");
							rows_all_tables_array[rows_all_tables_array.length] = {
								//'tablename' : name,
								'name' : $(this).attr('name'),
								'description' : $(this).attr('description'),
								'type' : $(this).attr('type')+ $(this).attr('length')
							};
						});
						rows_all_table_wise_json_array[ rows_all_table_wise_json_array.length ] = { "tablename": tablename, 'tabledescription': tabledescription, children: rows_all_tables_array };
					});
					rows_all_table_wise_json = JSON.stringify(rows_all_table_wise_json_array);
					console.log("print of stringify: "+ rows_all_table_wise_json);
					source_tables = {
						dataType: "json",
						dataFields : [ 
						               { name : 'tablename' }, 
						               { name : 'name' }, 
						               { name : 'type' }, 
						               { name : 'description' }, 
						               { name: 'children', type: 'array'} 
						             ],
						hierarchy:
		                {
		                    root: 'children'
		                },
		                id: 'name',
		                localdata : rows_all_table_wise_json
					};
					dataAdapter_table = new $.jqx.dataAdapter(source_tables);
					// create Tree Grid
					$("#treeGrid").jqxTreeGrid(
				            {
				                width: 680,
				                source: dataAdapter_table,
				                pageable: true,
				                columnsResize: true,
				                ready: function()
				                {
				                    // expand row with 'EmployeeKey = 2'
				                    //$("#treeGrid").jqxTreeGrid('expandRow', 2);
				                },
				                columns: [
				                  //{ text: 'Table Name', dataField: 'tablename', minWidth: 100, width: 150 },
				                  { text: 'Field Name',  dataField: 'name', width: 150 },
				                  { text: 'Field Type', dataField: 'type', width: 100 },
				                  { text: 'Field Description', dataField: 'description', width: 300 },
				                ]
				    });
				}
			});
			
        });

————————————————————————————————————

Exception is pointing to line where treegrid is initialized –> $(“#treeGrid”).jqxTreeGrid(

I have printed the json object which is exactly as suggested in the example. Below is the json output.
————————————————————————————————————
[
{“tablename”:”POSHIPPING”,”tabledescription”:”Shipping Data for Stock Transport Orders”,
“fields”:[
{“name”:”PO_ITEM”,”description”:”Item Number of Purchasing Document”,”type”:”NUM5″},
{“name”:”SHIP_POINT”,”description”:”Shipping Point/Receiving Point”,”type”:”CHAR4″}
]},
{“tablename”:”POITEM”,”tabledescription”:”Item Data”,
“fields”:[
{“name”:”PO_ITEM”,”description”:”Item Number of Purchasing Document”,”type”:”NUM5″},
{“name”:”SHIP_POINT”,”description”:”Shipping Point/Receiving Point”,”type”:”CHAR4″}
]}
]
————————————————————————————————————

Please let me where is the issue.

Thanks, Radha

[Peter StoevKeymaster]

Hi Radha,

The problem is that you specified in the data source that your children item is called “children”, but as far as I see in our JSON it is called “fields”.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[chradhaParticipant]

Hi Peter

That output is before i made the change from “fields” to “children”. I had a doubt on word “fields”, so, i changed to “children” but anyhow that also did not work.

Please ignore that.

Thanks, Radha

[Peter StoevKeymaster]

Hi Radha,

Ok, what is your JSON then? Also as you can see from our Nested JSON sample, the Objects are with the same structure i.e Parent and Child are expected to have same members.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[chradhaParticipant]

Hi Peter

I agree with you. I too had that doubt in mind. I will change that.

But i want to clarify one more thing. The error is thrown when treegrid is loading the property “source: dataAdapter_table". I printed the size of the dataAdapter_table recores before assigning to treegrid. It has records inside it.

And the exception details are:
——————————————————————————–
Len of dataAdapter_table: 31
SCRIPT5007: Unable to get property ‘toString’ of undefined or null reference
jqxdatatable.js, line 7 character 29348
——————————————————————————–

What i dont understand is, it is neither null nor undefined. It has records in it and we can see the log tells that the length is 31.

BTW, it was internally calling jquery-1.10.2.js which i added in /scripts/ folder. While downloading this file, i saw the below point in release notes.
#13974: Accessing XML attribute named “type” broken on IE 7
I dont know if it has any relavance here!

I will make the json structure changes and update.

Thanks, Radha

[Peter StoevKeymaster]

Hi Radha,

When you try to bind the widget to something which is not supported, you would not be able to bind the widget. If you provide a JSON structured in the way demonstrated in our Nested JSON example, the widget will display your data. It’s ok that you read the jQuery 1.10.2 release notes, but I am not sure whether this is relevant to your case or not. Most probably it is not.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[chradhaParticipant]

Hi Peter

Thanks for the correct pointer. I am able to get the treegrid now. The json parent/child structure is the culprit.

Thanks again.

…..Radha

[Author]

Posts