Hello, I currently have a hierarchical grid being populated with a DataSource like this:
var json = new $.ig.DataSource({ responseDataType : "jsonp", type: "remoteUrl", dataSource: dataSource });
$(gridName).igHierarchicalGrid({ // For load on demand initialDataBindDepth : 0, maxDataBindDepth : 1, oData : true, // Grid height/width height : 665, width : 1280, //Footer showFooter : true, fixedFooters : true, // Primary key and data relationships primaryKey : "sysId", dataSource: json, // Column definition autoGenerateColumns : false, columns : [ { headerText : "Rule ID", key : "refDataId", dataType : "number", width : 100 }, { headerText : "Rule Name", key : "name", dataType : "string", width : 325 }, { headerText : "Line of Business", key : "linesOfBusiness", dataType : "string", width : 170 }, { headerText : "State", key : "states", dataType : "string", width : 130 }, { headerText : "Transaction", key : "transactions", dataType : "string", width : 200 }, { headerText : "Rule Type", key : "services", dataType : "string", width : 125 }, { headerText : "Business Expression", key : "businessExpression", dataType : "string", width : 200 }, { headerText : "Begin Date", key : "startDate", dataType : "date", format : "yyyy-MM-dd", width : 150 }, { headerText : "End Date", key : "endDate", format : "yyyy-MM-dd", dataType : "date", width : 150 }, { headerText : "Action", key : "action", dataType : "string", width : 125 }, { headerText : "Product", key : "products", dataType : "string", width : 100 }, { headerText : "Policy Form", key : "policyTypes", dataType : "string", width : 125 }, { headerText : "Source System", key : "sourceSystems", dataType : "string", width : 150 }, { headerText : "Service", key : "services", dataType : "string", width : 125 }, { headerText : "UW Company", key : "underwritingCompanies", dataType : "string", width : 150 }, { headerText : "Condition", key : "condition", dataType : "string", width : 125 }, { headerText : "Dictionary ID", key : "dictionaryIds", dataType : "string", width : 135 }, { headerText : "Hold", key : "status", dataType : "string", width : 100 }, { headerText : "System Id", key : "sysId", dataTyp : "number", width : 100 } ], //Sub-grid columns columnLayouts : [ { childrenDataProperty: "associatedVariables", foreignKey: "sysId", primaryKey: "sysId", autoGenerateColumns : false, columns : [{key: "refDataId", headerText: "Variable ID"}] } ], }); });}
The problem is whenever a row is expanded to load the data on demand through oData, I receive the following error:
Uncaught Error: The remote request to fetch data has failed: (parsererror) Cannot read property 'paging' of undefined
Being generated from: infragistics.ui.grid.framework.js:25
We are getting a response back, but why would this error be thrown?
Is there any reason that this is occurring?
As an additional note, the original datasource that I am connecting to is a Java webservice based off of JAX-RS Restful implementation. Our content-type we are producing is "application/json".
Thanks.
Hello,
Thank you for the details provided. . Based on the data provided and jQuery grid definition provided I am not certain how relationship is set between parent and child band. Refer to the below links that will give you samples and more details on this:
<https://es.infragistics.com/community/blogs/b/taz_abdeali/posts/using-odata-with-jquery-hierarchical-grid>
<https://es.infragistics.com/community/blogs/b/damyan_petev/posts/jquery-hierarchical-grid-load-on-demand>
<https://www.igniteui.com/help/ighierarchicalgrid-load-on-demand>
I hope this helps.
For a simplier example of my problem, I've shortened the set-up of the grid. I've attached the html example file for it. The grid is making oData calls to a RESTful webservice as well, using load on demand. Here is a sample output for the main call:
[ { "refDataId": 147, "sysId": 22, "name": "variableName1", "rules": [] }, { "refDataId": 148, "sysId": 25, "name": "variableName2",
"rules": [] } ]
And when the request is made from the grid for the load on demand for the sub-grid, the url for the call is the same, with the addition of the query parameter of "?path=sysId:xxx (where xxx is the sysId of the row). Output looks like this:
[ { "ruleId": 721, "name": "721 : Rule" }, { "ruleId": 841, "name": "841 : Rule" }, { "ruleId": 963, "name": "963 : Rule" }, { "ruleId": 296, "name": "296 : Rule" }, { "ruleId": 602, "name": "602 : Rule" }, { "ruleId": 407, "name": "407 : Rule" }, { "ruleId": 89, "name": "89 : Rule" } ]
I've tried setting the paging property in the child grid (as a feature of the child grid), is this necessary for the the Load on Demand? Your example does not include the paging property either (within the parent or the child grid).
Also, through debugging, I know that the grid is making its call to get the data, and that we are receiving a response with the JSON data in the response.
In the provided code, I do not see any paging property set. Have you set paging on the child grid? I would also recommend you to verify the data using FireBug and check the response details when the grid is making the call to get its data. I have attached a sample that binds data to local JSON data. If the services return JSON format grid should show the data.