I have the following grid below, for this purpose assume both the state / user api will return an id & name. I am unable to export this grid however, as I get the following error when attempting it. Are we able to export grids with complex objects? If so, could you provide an example?
infragistics.excel.js:79 Uncaught TypeError: a.getType is not a function$c.a0 @ infragistics.excel.js:79$c.ay @ infragistics.excel.js:79$c.ao @ infragistics.excel.js:79$c._d1 @ infragistics.excel.js:49$c.setCellValue @ infragistics.excel.js:48$.ig.GridExcelExporter.$.ig.GridExcelExporter.Class.extend._exportCell @ infragistics.gridexcelexporter.js:23$.ig.GridExcelExporter.$.ig.GridExcelExporter.Class.extend._exportDataSegmentRow @ infragistics.gridexcelexporter.js:23$.ig.GridExcelExporter.$.ig.GridExcelExporter.Class.extend._exportDataSegment @ infragistics.gridexcelexporter.js:23(anonymous function) @ infragistics.gridexcelexporter.js:23
$("#grid").igGrid({ virtualization: false, primaryKey: "id", responseDataKey: "value", autoGenerateColumns: false, autoGenerateLayouts: false, localSchemaTransform: true, renderCheckboxes: true, columns: [{ // note: if primaryKey is set and data in primary column contains numbers, // then the dataType: "number" is required, otherwise, dataSource may misbehave headerText: "Id", key: "id", dataType: "number" }, { headerText: "Year", key: "year", dataType: "string" }, { headerText: "State", key: "state", dataType: "object", width:250, mapper: function (record) { return record.state.name; } }, { headerText: "User", key: "user", dataType: "object", width:250, mapper: function (record) { if (record.user != null) { return record.user.name; } else { return null; } } } ], width: "500", features: [ { name: "Updating", enableAddRow: false, enableDeleteRow: false, editMode: "cell", columnSettings: [ { columnKey: "user", editorType: "combo", editorOptions: { dataSource: "/api/usersapi/", textKey: "name", valueKey: "id", mode: "editable" } }, { columnKey: "state", editorType: "combo", disabled: true, editorOptions: { dataSource: "/api/statesapi/", textKey: "name", valueKey: "id", mode: "dropdown" } }, { columnKey: "id", editorOptions: { disabled: true } }, { columnKey: "year", editorOptions: { disabled: true } } ] }, { name: "Hiding", columnSettings: [ { columnKey: "id", allowHiding: false, hidden: true }, { columnKey: "year", allowHiding: false, hidden: true } ] }, ] });
Hello Brian,
Currently the igGridExcelExporter looks for a formatter function to export complex objects. However in 16,1 the mapper function was introduced in igGrid to deal with complex objects and the igGridExcelExporter does not yet handle that update. I have logged this development issue in our internal system so that it gets attention. The fix should be available in next service release of Ignite UI.
Meanwhile I suggest that you define a formatter function, which will enable you to export complex object in the given scenario:
{ key: "User", headerText: "User", dataType: "object", width: "150px", mapper: function (record) { if (record.User != null) { return record.User.Name; } else { return null; } }, formatter: formatFunc},
// when the igGrid calls formatFunc, val will be the value extracted by the mapper, i.e record.User.Name, which would be "John"// when the igGridExcelExporter calls formatFunc, val will be the complex object, i.e record.User, which would be "User": { "id": 9, "Name": "John" }
function formatFunc(val) { if (typeof(val) === "object") { return val.Name; } else { return val; } }
Please let me know if you have further questions on the matter, I will be glad to help.
Thanks, that helped. What about adding filtering (client-side) to a grid with a complex object? If I try to add it now, after adding the formatter (or even before adding the formater), I am presently getting an error.
In the provided jsfiddle the igGrid is set a responseDataKey:
responseDataKey: "value",
However the data that populates the grid is not wrapped, so when the $.ig.DataSource class unwraps the data source an empty arrays is returned as a result. Please remove the responseDataKey and this will resolve the issue.
Example here:
http://jsfiddle.net/brianperch/334pzwyv/
As soon as I add Filter feature (local), no longer renders. Trying to understand why.
Realized this is not presently shared, looking at a way to get it shared.
Can you take a look at the following...
http://jsfiddle.net/brianperch/a6ajmq33/2/
it presently displays the data and will group, but when I add the following under features, it fails to display properly.
{
name: "Filtering",
type: "local"
}
Hi Brian,
You can modify the if clause to not return true if there is null value:
function formatFunc(val) { if (typeof(val) === "object" && val !== null) { return val.Name; } else { return val; } }
Please let me know if you have further questions.