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}}"
}

]
}
]
}