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
The grid initialization could also be wrapped the following two ways:
$(window).on("load",function(){
$("#mainGrid").igHierarchicalGrid({ … });
Or
$(window).ready(function(){
No success. I tried both ways you suggested. I'm still getting the same problem. The top-level of the hierarchy will display with no problem, but none of the child rows will display. When I click on the plus sign on the left side I get the header for the child row, but no data rows.
When the dataSource is defined in the initialization the following way:
dataSource: data,
dataSourceType: "json"
All the rows are rendered, including the child rows. It would be helpful if you share how and when in your code the dataSource is bound to the grid.
Looking forward to hearing from you.
That was the problem! I was binding using an ajax call. However, I was calling
$("#mainGrid").igGrid("option", "dataSource", json);
$("#mainGrid").igGrid("databind");
instead of .igHierarchicalGrid so only the top-level rows were being bound. Thank you! The ajax call is now fixed and the child rows are being rendered.
$.ajax({ type: "POST", url: '@Url.Action("GetViewShipmentData", "Home")', dataType: "json" // we are expecting JSON data back }) .done( function(json) { $("#mainGrid").igHierarchicalGrid("option", "dataSource", json); $("#mainGrid").igHierarchicalGrid("dataBind"); }) .fail( function(jqXhr, textStatus, errorThrown) { console.warn(jqXhr.responseText); alert(errorThrown + ' getJSON request failed for grid ' + textStatus); }) .always( function() { } );
I am glad that you were able to solve your issue.
Thank you for using Infragistics components.