Thank you for your reply, Petko!  

Below is the jQuery code for the igHierarchicalGrid implementation.  There are dynamic columns being loaded from the initial loadExceptionDefs() call, and they are used to populate the columnLayouts.columns property.

The grid databinding override is intended to build a web API call to the local API that will return a list of "exceptions" for the given exception definition name. (category, if you will).  The API call that is being constructed at runtime does indeed work.

However, when debugging is released and the code is run, somewhere in "createwidget", the aforementioned error occurs.  The web API call in loadExceptions() is never made, as the breakpoint in my C# code is never hit inside the URL (which, does work from Fiddler), so it appears the grid never calls the API method. 

$(document)
.ready(function () {

blockWithMessage("Loading Exception Definitions. Please wait...");
loadExceptionDefs();
});

function blockWithMessage(msg) {
...
}

function loadExceptionDefs() {
$.getJSON(
{
url: "http://" + localHost + rootDir + "api/exception/def",
success: function (data) {
initExceptionDefGrid(data);
$.unblockUI();
},
error: function (request, status, error) {
alert("An error occurred when retrieving Exception Report");
$.unblockUI();
}
});
};

function loadExceptions(defname) {
$.getJSON(
{
url: "http://" + localHost + rootDir + "api/exception/exc?name=" + defname,
success: function (data) {
initExceptionDefGrid(data);
$.unblockUI();
},
error: function (request, status, error) {
alert("An error occurred when retrieving Exception Report");
$.unblockUI();
}
});
};

function showEntitySummary(id) {
...
}

function initExceptionDefGrid(data) {
var columnList = data.cols.map(function(c) {
return { key: c.colname, headerText: c.caption, dataType: "string", hidden: c.hidden };
});
columnList.unshift({ headerText: "", key: "ViewSummary", dataType: "string", width: "110px", unbound: true, template: "<input type='button' onclick='showEntitySummary(${_excptnid})' value='View Summary' class='delete-button'/>" });

$("#gridTable")
.igHierarchicalGrid({
initialDataBindDepth: 0,
dataSourceType: "json",
dataSource: data.defs,
enableUTCDates: true,
width: "100%",
autoGenerateColumns: false,
autoGenerateLayouts: false,
primaryKey: "defname",
columns: [
{ headerText: "defname", key: "defname", hidden: true },
{ headerText: "Exception Type", key: "desc" },
{ headerText: "Count", key: "count" }
],
columnLayouts: [
{
autoGenerateColumns: false,
dataSource:null,
columns: columnList,
key: "Exceptions",
foreignKey: "defname",
odata: false,
rest: false
}
],
odata: false,
rest: false,
features: [
{ name: "Resizing" },
{ name: "Filtering" },
{ name: "Sorting" }
]
});
}

$(document).on("iggriddatabinding", function (evt, ui) {
if (!ui.owner.element.hasClass("ui-iggrid-root")) {
var parentRowId = ui.owner.element.parents("tr[data-container='true']").prev().data("id"),
parentGrid = ui.owner.element.parents("table.ui-iggrid-table").data("igGrid"),
parentRowData = parentGrid.findRecordByKey(parentRowId);

var dataSourceUrl = "http://" + localHost + rootDir + "api/exception/ex?defName=" + parentRowData.defname;
ui.owner.options.dataSourceUrl = dataSourceUrl;
}
});

Hello Blake, 

Thank you for sharing your full grid definition. 

The reason for your backend not being hit is that initially since null is set as the child data source:

dataSource:null

The data source assumes that the data source type is not remote.

 Additionally in the dataBinding event the internal instance of the igDataSource is already created with the current child grid settings so changing them at that point will not be reflected. You can instead directly change the data source settings via the ui.dataSource option.

For example:

$(document).delegate("#hierarchicalGrid", "iggriddatabinding", function (evt, ui) {

                if (!ui.owner.element.hasClass("ui-iggrid-root")) {

                                var parentRowId = ui.owner.element.parents("tr[data-container='true']").prev().data("id"),

                                parentGrid = ui.owner.element.parents("table.ui-iggrid-table").data("igGrid"),

                                parentRowData = parentGrid.findRecordByKey(parentRowId);

                                var dataSourceUrl = "api/exception/ex?defName=" + parentRowData.defname;

                                ui.dataSource.settings.dataSource = dataSourceUrl;

                }

});

I’ve attached a sample for your reference where mockjax is used to simulate a response from a remote backend.

 Please refer to the attached sample and let me know if you have any questions.

Best Regards,

Maya Kirova

Infragistics, Inc.

http://www.infragistics.com/support