I have posted on the Infragistics forums to no avail so I thought I would ask the community who may use their product.
I am implementing a Hierarchical Grid with IgniteUI and cannot seem to get my JsonResult to bind to the grid. The grid will render with the correct number of rows but none of the columns populated.
I have the following Grid:
$("#grid").igHierarchicalGrid({
dataSourceType: "json",
dataSource: "/Products/GetProducts/",
odata: "false",
autoGenerateColumns: "false",
primaryKey: "Id",
initialDataBindDepth: 1,
columns: [
{ headerText: "Id", key: "Id", dataType: "number" },
{ headerText: "SKU", key: "SKU", dataType: "string" },
{ headerText: "UPC", key: "UPC", dataType: "string" },
{ headerText: "Name", key: "Name", dataType: "string" },
{ headerText: "ManufacturerId", key: "ManufacturerId", dataType: "number" },
{ headerText: "ManufacturerSKU", key: "ManufacturerSKU", dataType: "string" },
{ headerText: "Inventory", key: "Inventory", dataType: "number" },
{ headerText: "Weight", key: "Weight", dataType: "number" },
{ headerText: "Price", key: "Price", dataType: "number" },
{ headerText: "MSRP", key: "MSRP", dataType: "number" },
{ headerText: "CategoryId", key: "CategoryId", dataType: "number" },
{ headerText: "Active", key: "Active", dataType: "string" },
{ headerText: "CreateDate", key: "CreateDate", dataType: "date", format: "MM-d-yyyy, h:mm tt" },
{ headerText: "UpdateDate", key: "UpdateDate", dataType: "date", format: "MM-d-yyyy, h:mm tt" }
],
features: [
{
name: "Sorting",
type: "local"
},
{
filterExprUrlKey: 'filter',
filterLogicUrlKey: 'filterLogic',
name: "Filtering",
type: "remote",
columnSettings: [
{
columnKey: 'Id',
condition: "equals"
}
]
},
{
name: 'Paging',
type: "local",
pageSize: 10
}
],
columnLayouts: [
{
key: "VendorProducts",
primaryKey: "Id",
foreignKey: "Id",
autoGenerateColumns: "false",
responseDataKey: 'results',
columns: [
{ headerText: "Id", key: "Id", dataType: "number" },
{ headerText: "ProductId", key: "ProductId", dataType: "number" },
{ headerText: "PartnerName", key: "PartnerName", dataType: "string" },
{ headerText: "VendorSKU", key: "VendorSKU", dataType: "string" },
{ headerText: "Cost", key: "Cost", dataType: "number" },
{ headerText: "Inventory", key: "Inventory", dataType: "number" },
{ headerText: "Active", key: "Active", dataType: "number" }
],
features: [
{
name: "Sorting",
type: "local"
}]
}
]
});
The Json returned from the server is as follows
var data = [{ "Id": 1032, "SKU": "5_113990", "UPC": "10000001", "Name": "NVG7-3P", "ManufacturerId": 1015, "ManufacturerSKU": "NVGONVG73P", "Inventory": 0, "Weight": 3, "Price": 3026.6, "MSRP": 3799, "CategoryId": 1018, "Active": true, "CreateDate": "\/Date(1398794923467)\/", "UpdateDate": "\/Date(1400000587250)\/", "VendorProducts": [{ "Id": 1046, "ProductId": 1032, "PartnerName": "Direct Buy", "VendorSKU": "113990", "Cost": 0, "Inventory": 0, "Active": true }] }];
Which when plugged into dataSource will render the grid just fine, however when the grid calls out to the method:
[HttpGet]
public JsonResult GetProducts()
{
var model = Query.....
return Json(model, JsonRequestBehavior.AllowGet);
}
The following error is thrown:
**Uncaught Error: There was an error parsing the JSON data and applying the defined data schema: The input data doesn't match the schema, the following field couldn't be mapped: VendorProducts**
I have tried a number of things but cannot seem to get the grid to load on demand.
