Hi there,
I am trying to implement an hierarchical grid with jQuery Load on Demand, but I want to do it without oData.
Following http://ko.infragistics.com/community/forums/p/94782/468676.aspx#468676 , I tried handling the igGrid.dataBinding event and in the event handler I set the dataSource option to a URL I constructed, as follows:
$(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; }});
The URL points to a web api controller in the same project, which in turn calls a remote Web API. I don't have the option of implementing IQueryable in the web api.
While debugging, I tested the resultant URL in Fiddler, which works fine, but when I execute the page, I get the following error when I expand the row:
"There was an error parsing the JSON data and applying the defined data schema: Cannot read property 'Metadata' of null"
Any help would be greatly appreciated, I need this hierarchical grid to work ASAP.
Hi,
Thank you for contacting Infragistics. By the information provided I assume that the response of the request to the WebAPI is empty or not correct. Could you send me the response that you receive? Also if you could provide sample application that reproduces the issue will increase the process of finding a solution greatly.
Kind Regards,
Petko Zhekov
Software Developer
Infragistics, Inc.
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);