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.
Hi Brian,
The mapper function provides the value that features like the filtering and sorting work with. The formatter only modify the value displayed. This should not be an issue and I have explicitly verified that the suggested works fine with filtering enabled. You can see the sample I used to test this at http://jsfiddle.net/1qgwjL2h/1/
However if you experience issues trying to filter the grid in a custom way, please modify my sample accordingly or send me yours that I could investigate.
If you can change your example to where a few of the rows do not have a user selected yet and would have a null value initially.
Yes I did this. If some data rows do not have a user initially, then the value displayed in the cell will be undefined, but the value is actualy null. In exporting no value is written in the worksheet and this is expected. If you expertience an issue with this scenario, please provide more details so that I could help.
Hristo,
In your example: http://jsfiddle.net/1qgwjL2h/1/ if i switch the last line of data to the following:
{ 'ProductID': 43, 'Name': 'Odit ut quo minus.', 'ProductNumber': 1083007847, "InStock": false, "Quantity": 0, "User": null }
it no longer seems to work. This would be more representative of my data as the user has not yet been selected:
{ "id": 60, "year": 2017, "state": { "id": 2, "abbreviation": "AK", "escheatmentname": "STATE OF ALASKA", "name": "Alaska", "territory": false, "updateUser": "CORP\\XYZ", "updateTime": "2016-06-03T15:04:37.503" }, "user": null }
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"
}
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.