I'm having problems getting the child rows of a hierarchical grid to show up.
Here's the grid definition:
$("#mainGrid").igHierarchicalGrid({ width: "100%", primaryKey: "Id", dataSource: new Array(0), // Just use an empty array to define the dataSource for now. We will populate it with data later dataSourceType: "json", scrolling: true, autofitLastColumn: false, columns: [ { headerText: "", key: "Id", dataType: "string", width: "0px" }, { headerText: "", key: "RowFormat", dataType: "number", width: "0px" }, { headerText: "OrdNum", key: "OrdNum", width: "75px", dataType: "number" }, { headerText: "ShpNum", key: "ShpNum", width: "75px", dataType: "number" }, { headerText: "Location", key: "Loc", width: "70px", dataType: "string" }, { headerText: "Order Type", key: "DetailType", width: "90px", dataType: "string" }, { headerText: "Customer", key: "DetailName", width: "360px", dataType: "string" }, { headerText: "Multi", key: "Multi", dataType: "string", width: "45px" }, { headerText: "BrdFt", key: "BrdFt", width: "85px", dataType: "number", format: "###,###,###" }, { headerText: "Pln Dt Type", key: "DateType", width: "100px", dataType: "string" }, { headerText: "Pln Dt", key: "PackageSize", width: "130px", dataType: "string" }, { headerText: "", key: "OrdDateFormat", width: "0px", dataType: "number" }, { headerText: "Inv. Avail. Dt", key: "BoardFeet", width: "140px", dataType: "string" } ], autoGenerateColumns: false, columnLayouts: [ { key: "OrderDetail", autoGenerateColumns: false, primaryKey: "RowId", childrenDataProperty: "OrderDetail", columns: [ { key: "RowId", headerText: "", width: "0px", dataType: "number" }, { headerText: "Order Item Details", key: "OrderItemDetails", width: "428px", dataType: "string", columnCssClass: "shipmentOrder" }, { headerText: "PkgSize", key: "PackageSize", width: "85px", dataType: "number", columnCssClass: "shipmentOrder" }, { headerText: "FOB Mill", key: "Fob", width: "85px", dataType: "string", columnCssClass: "shipmentOrder" }, { headerText: "BrdFt", key: "BoardFeet", width: "85px", dataType: "number", columnCssClass: "shipmentOrder" }, { headerText: "Length", key: "DetSize", width: "85px", dataType: "string", columnCssClass: "shipmentOrder" }, { headerText: "Units", key: "DetValue", width: "50px", dataType: "number", columnCssClass: "shipmentOrder" }, { headerText: "Avail Src", key: "AvailableSrc", width: "85px", dataType: "string", columnCssClass: "shipmentOrder" }, { headerText: "Avail Dt", key: "AvailDate", width: "140px", dataType: "string", columnCssClass: "shipmentOrder" } ] } ], rowsRendered: function() { FormatGrid(); } });
The Here's the data
{ "Id": "O1041579_0", "RowID": 83302, "RowFormat": 8, "Loc": "ABCDE", "OrdNum": 12345, "ShpNum": 0, "OrderDate": "/Date(1584939600000)/", "OrdDate": "03/23/2020 - Mon", "OrdDateFormat": 3, "DateType": "Due", "DetailType": null, "DetailName": "Some company name goes here, INC.", "OrdType": "BRK", "Multi": "", "AvailDate": "/Date(-2209143600000)/", "AvailableDate": "12/30/1899 - Sat", "BrdFt": 37800, "OrderDetail": [ { "RowId": 83302, "OrdNum": 12345, "ShpNum": 0, "Location": "ABCDE", "DetailType": "SOR", "Owner": "ABC", "Product": "PROD", "PackageSize": 189, "Description": "WW KD ECON S4S 2X6 ", "OrderItemDetails": "MOR 4337 WW KD ECON S4S 2X6 ", "FobMill": 193.0, "Fob": "$193.00", "DetSize": "120", "DetValue": 20, "BoardFeet": 37800, "AvailableDate": "/Date(-2209143600000)/", "AvailDateFmt": " 12/30/1899 - Sat", "AvailDate": "TODAY", "AvailableSrc": "OH" } ] }, { "Id": "O1052617_0", "RowID": 83303, "RowFormat": 8, "Loc": "FJHIJ", "OrdNum": 12346, "ShpNum": 0, "OrderDate": "/Date(1586149200000)/", "OrdDate": "04/06/2020 - Mon", "OrdDateFormat": 3, "DateType": "Due", "DetailType": null, "DetailName": "FRNT/LAMPING", "OrdType": "TRN", "Multi": "", "AvailDate": "/Date(-2209143600000)/", "AvailableDate": "12/30/1899 - Sat", "BrdFt": 11264, "OrderDetail": [ { "RowId": 83303, "OrdNum": 12346, "ShpNum": 0, "Location": "FJHIJ", "DetailType": "SOR", "Owner": "FJH", "Product": "4065", "PackageSize": 96, "Description": "HF GRN ECON S4S 4X4 ", "OrderItemDetails": "RAN 4065 HF GRN ECON S4S 4X4 ", "FobMill": 0.0, "Fob": "TRNO", "DetSize": "08", "DetValue": 11, "BoardFeet": 11264, "AvailableDate": "/Date(-2209143600000)/", "AvailDateFmt": " 12/30/1899 - Sat", "AvailDate": "TODAY", "AvailableSrc": "OH" }, { "RowId": 83304, "OrdNum": 12346, "ShpNum": 0, "Location": "FJHIJ", "DetailType": "SOR", "Owner": "FJH", "Product": "7251", "PackageSize": 96, "Description": "HF KD ECON S4S 4X4 ", "OrderItemDetails": "RAN 7251 HF KD ECON S4S 4X4 ", "FobMill": 0.0, "Fob": "TRNO", "DetSize": "08", "DetValue": 11, "BoardFeet": 11264, "AvailableDate": "/Date(-2209143600000)/", "AvailDateFmt": " 12/30/1899 - Sat", "AvailDate": "TODAY", "AvailableSrc": "OH" } ] }
I'm not sure what I'm doing wrong. Any help would be appreciated
Hello Kenneth,
After investigating this further, I determined that the initialization of the igHierarchicalGrid should be wrapped in $(function(){. . .}); in order for the initialization of the control to be called after the scrips for jQuery are loaded. When this is added to the code the grid is rendered as expected.
$(function(){
$("#mainGrid").igHierarchicalGrid({
width: "100%",
primaryKey: "Id",
dataSource: new Array(0), // Just use an empty array to define the dataSource for now. We will populate it with data later
dataSourceType: "json",
scrolling: true,
autofitLastColumn: false,
columns: [ . . . ],
autoGenerateColumns: false,
columnLayouts: [ . . . ]
});
Please let me know if you need any further information regarding this matter.
Regards,
Monika Kirkova,
Infragistics
Hello Monika,
Thank you for your reply.
I didn't include this in the code, but the initialization of the hierarchical grid is already wrapped in the jQuery onLoad.
Thanks