I get this error when doing runtime data binding:
There was an error parsing the JSON data and applying the defined data schema: Unable to get property 'ID' of undefined or null reference
Consider these example which I picked up from http://help.infragistics.com/jQuery/2015.1/ui.ighierarchicalgrid. Instead of binding the data during the initialization, I bound it after initialization..
var jsonData2 = { "d": [ { "ID": 0, "Name": "Food", "Products": [ { "ID": 0, "Name": "Bread", "Price": "2.5" } ] }, { "ID": 1, "Name": "Beverages", "Products": [ { "ID": 1, "Name": "Milk", "Price": "3.5" }, { "ID": 2, "Name": "Vint soda", "Price": "20.9" } ] }, { "ID": 2, "Name": "Electronics", "Products": [ { "ID": 7, "Name": "DVD Player", "Price": "35.88" }, { "ID": 8, "Name": "LCD HDTV", "Price": "1088.8" } ] } ] }
$("#hierarchicalGrid").igHierarchicalGrid({ initialDataBindDepth: 1, //dataSource: jsonData, //dataSourceType: "json", responseDataKey: "d",
autoGenerateColumns: false, primaryKey: "ID", columns: [ { headerText: "ID", key: "ID", width: "50px", dataType: "number" }, { headerText: "Name", key: "Name", width: "130px", dataType: "string" } ], autoGenerateLayouts: false, defaultChildrenDataProperty: "Products", columnLayouts: [ { name: "Products", responseDataKey: "", childrenDataProperty: "Products", autoGenerateColumns: false, primaryKey: "ID", columns: [ { key: "ID", headerText: "ID", width: "25px" }, { key: "Name", headerText: "Product Name", width: "90px" }, { key: "Price", headerText: "Price", dataType: "number", width: "55px" } ] } ] }); $("#hierarchicalGrid").igGrid("option", "dataSourceType", "json"); $("#hierarchicalGrid").igGrid("dataSourceObject", jsonData2); $("#hierarchicalGrid").igGrid("dataBind");
Hello Newbie,
I am glad that you find my suggestion helpful.
Please let me know if you have any further questions regarding this matter.
Thank you for choosing Infragistics components.
Thank you for posting in our community.
What I can suggest in your scenario is setting dataSource option to igHierarachicalGrid instead of igGrid. This will ensure that the data source is correctly set for both parent and child levels. For example:
$("#hierarchicalGrid").igHierarchicalGrid({ responseDataKey: "d", autoGenerateColumns: false, primaryKey: "ID", columns: [ { headerText: "ID", key: "ID", width: "50px", dataType: "number" }, { headerText: "Name", key: "Name", width: "130px", dataType: "string" } ], autoGenerateLayouts: true, defaultChildrenDataProperty: "Products", columnLayouts: [ { name: "Products", responseDataKey: "", childrenDataProperty: "Products", autoGenerateColumns: false, primaryKey: "ID", columns: [ { key: "ID", headerText: "ID", width: "25px" }, { key: "Name", headerText: "Product Name", width: "90px" }, { key: "Price", headerText: "Price", dataType: "number", width: "55px" } ] } ] }); $("#hierarchicalGrid").igHierarchicalGrid("option","dataSource", jsonData2); });
I hope you find this suggestion helpful.
Please let me know if you need any further assistance with this matter.
Thank you for using Infragistics components.