like this we have initialized hierarchical grid ,please let me know if you need any other information

this.ds = new $.ig.DataSource({
dataSource: data,
responseDataKey: "result",
urlParamsEncoding: function (owner, params) {
if (pageLoad) {
newFilters.filter((item) => {
owner.settings.filtering.expressions.push(item)
})
pageLoad = false;
}
return true;
}
});

this.hgridOptions = {
initialDataBindDepth: 1,
responseDataKey: "result",
dataSource: this.ds, //$.ajax({ url: 'foo/bar' });
primaryKey: "transactionId",
requestError: function (evt, ui) {
if (ui.message.indexOf("401") > -1) {
$("#gettoken").click()//document.getElementById("accessdenied").click(); }
}
else {
return false;
}
},
width:'100%',
autoGenerateColumns: false,
columns: [
{ key: "transactionId", headerText: "PO Number #", dataType: "string", hidden: true },
{ key: "poNumber", headerText: "PO Number #", dataType: "string", width: "150px" },
{
key: "poDate", headerText: "PO Date", dataType: "date",
format: "MMM dd, yyyy",
dateDisplayType: "local", width: "210px"
},
{ key: "poStatus", headerText: "PO Status", dataType: "string", width: "150px" },

{ key: "status", headerText: "Submission Status", dataType: "string", width: "180px" },
{
key: "modifiedDt", headerText: "Submission Date", dataType: "date",
format: "MMM dd, yyyy hh:mm tt",
dateDisplayType: "local", width: "210px"
}

],
//childrenDataProperty: "Employee",
autoGenerateLayouts: false,
features: [
{
name: "Paging",
type: "remote",//remote
pageSize: 10,
recordCountKey: "TotalRecordsCount",
pageSizeDropDownLocation: "inpager",
pageIndexChanged: function (evt, ui) { window.scroll(0, 0) }

},
{
name: "Filtering",
type: "remote",
mode: 'simple',
allowFiltering: true,
caseSensitive: false,
},
],
columnLayouts: [
{
key: "child",
autoGenerateColumns: false,
width: "100%",
columns: [
{ key: "transactionId", hidden: true },
{ key: "status", hidden: true },
{ key: "poStatus", hidden: true },
{ key: "childManufacturerId", headerText: "Part#", hidden: true },
{ key: "pO_ProductId1", headerText: "Part#", width: "100px" },
{ key: "contract", headerText: "Contract", width: "300px" },
{ key: "poDescription", headerText: "Description", width: "200px" },
{ key: "pO_QuantityOrdered", headerText: "Qty", width: "65px" },
{ key: "pO_UnitPrice", headerText: "Cost", width: "100px", template: "$${pO_UnitPrice}", columnCssClass: "numericAlignment", formatter: function (value) { return parseFloat(value).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') } },
{ key: "totalPrice", headerText: "Cost Extension", width: "185px", template: "$${totalPrice}", columnCssClass: "numericAlignment", formatter: function (value) { return parseFloat(value).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') } },
{
headerText: "Actions",
width: "53px",
key: "pO_AssignedIdentification",
template: //"<a onclick = 'angularComponentRef.geteditmodal(5)' title = 'Edit' style = 'cursor:pointer;'> edit </a>"
"{{if (${status}!='InTransit') && (${poStatus}!='Cancelled')}}<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' onclick='angularComponentRef.geteditmodal(\"${transactionId}\",${childManufacturerId})'>Edit</button>{{/if}}"
}

]
}
]
}

Hello,

I don't have your data, but the provided code sample seems to be working as expected with an empty data.

It would be great if you can attach a sample app demonstrating the issue. If it's an issue to isolate it, please let me know so I could send you the demo app, I made to test this scenario. You could use the app as a starting point and to modify it and send it back for further investigations.

Please send me the demo app

I see you are receiving an error, but I'm not able to replicate it.

My best guess would be that there is some mismatch between the data and the grid expectations for that data.

There could be some sort of circular reference there or if the data is enormous.

Could you try returning empty data from your API endpoint and see if the error persists?

can you please this issue asap

Now I Was installed Ignite-ui-full. still have an issue with hierarchical grid. Its works fine in angular 6, after upgraded angular 6 to 9,its not working. can you please let me know the issue asap.

getting this issue, data is not loading to the grid but I have seen that it call s to the API but before APIreturns the results it throws the error

Now i can able to install ignite-ui-full. but still grid is not loading the data, it goes to the api call but before completion of the service call its throws the error. please let me know the issue it works fine in angular6 after upgrade angular 6 to 9 its not working.