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,
I am glad that you were able to solve your issue.
Thank you for using Infragistics components.
Regards,
Monika Kirkova,
Infragistics
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() { } );
When the dataSource is defined in the initialization the following way:
$("#mainGrid").igHierarchicalGrid({
width: "100%",
primaryKey: "Id",
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.
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.
The grid initialization could also be wrapped the following two ways:
$(window).on("load",function(){
$("#mainGrid").igHierarchicalGrid({ … });
Or
$(window).ready(function(){
Please let me know if you need any further information regarding this matter.