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,
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.
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" } ]
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://ko.infragistics.com/community/blogs/b/taz_abdeali/posts/using-odata-with-jquery-hierarchical-grid>
<https://ko.infragistics.com/community/blogs/b/damyan_petev/posts/jquery-hierarchical-grid-load-on-demand>
<https://www.igniteui.com/help/ighierarchicalgrid-load-on-demand>
From what I have been able to ascertain (and how I was able to get the hierarchical grid to fire requests to my webservice), by setting oData: true and within the initial dataset, having the empty JSONArrays, linking this to the grid set-up (and the columnlayouts), I am able to see the request being sent to the server, as well as the second JSON response (the JSON with the "ruleID"/"name" objects. Unfortunately, then the aforementioned error occurs:
when it appears the grid is trying to handle the data. Am I missing something in the grid/datasource configuration?
I have attached a sample I have created using NorthWind database, which implements paging on the child band based on the links below:
<https://www.igniteui.com/hierarchical-grid/load-on-demand>
I have used CDN references in the sample I have provided as shown in the link below:
<https://www.igniteui.com/help/deployment-guide-infragistics-content-delivery-network(cdn)>
I would recommend you to modify your application based on the sample provided. If this issue is still present fell free to modify the sample I have provided with relevant dependencies and send it back.
Just another thing to note, I have been using version 12.1.20121.2023 of NetAdvantage for jQuery, but when I reverted back to the trial version (12.1.20121.1010), the error disappears, and everything is functional...
Hello Patrick,
Thank you for the additional important details. I was able to see the error you described with version 12.1.20121.2023. I have also noticed that this issue is resolved in latest public service release 12.1.20121.2059. As such, you can download this service release and use the JavaScript files in your sample or use CDN reference for version 12.1.20121.2059.
Hi:
I was able to successfully display igHierarchicalGrid with JSON data for Two Levels (like Year and Month) but not for three levels (like Year, Month and Day) .
I am using View Models to build the hierararchy and serialize the records using JSONConvert. I think my ViewModels/Hierarchical grid initialization is correct until Two Levels. I just extended the code to the third level and i am getting the error "Error: Syntax error, unrecognized expression: 2722" and it happens when i expand the plus icon at the last level.
Does anyone have a sample for Three Level igHierarchicalGrid with JSON data ? I am using AJAX calls to Oracle Backend generate JSON data.
Thanks
Trin