Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
70
Runtime DataBinding Produces Parsing JSON Error
posted
  • 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");

  • 17590
    Verified Answer
    Offline posted

    Hello Newbie,

    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.