Below are the Ignite UI versions
"ignite-ui": "^18.2.67", "igniteui-angular": "^9.1.28", "igniteui-angular-charts": "^9.1.2", "igniteui-angular-core": "^9.1.2", "igniteui-angular-wrappers": "^9.1.1"
grid is not loading,I am using remote call.
Please note that it doesn't match the schema, because the columns are different from the data, but the hierarchical grid loads as expected.
hgrid-remote.zip
Please send me the demo app
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.
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}}" }
] } ] }
Thank you for posting in Infragistics Forum!
We'll need more context on the scenario in order to do some investigations.
Can you provide a sample demonstrating the issue?
Also could you do a quick test if the issue is replicating with angular 11 and igniteui-angular-wrappers 11?