Hi
I am facing few issues while implementing igGrid with Angular 2. I have a master and child component both have igGrid on it. My child grid does not show the updated data if I change the biding object of child component.
I am attaching an application where I have 2 components master.ts and child.ts. Master component is using Product object and on each grid row change it send Product detail object to child component where Child component shows this information in grid.
In my child component I have 2 methods setDetails() and getDetails(). When master grid row changes it calls the getDetails() method to get the old row product detail information from child component, store this information into Product object and send currently active product row details information to child. I tries many different ways but the child grid does not update correctly with the object. Apart from that there are couple of more issues which I am facing along with it
To run the application unzip the folder and do npm install. typing install, bowser install and then "gulp build-spa" to update any ts file
-Anilesh
Also regarding your additional questions:
1) optionChange() throws error:
This issue has already been addressed. I suggest you get the latest version of our angular 2 components from github: https://github.com/IgniteUI/igniteui-angular2/blob/master/src/igniteui.angular2.ts
2) rowSelection changed not firing
The rowSelectionChanged event is part of the Selection feature so it cannot be specified at the root level of the component. You can specify it inside the Selection feature’s declaration, for example:
{
name: "Selection",
mode: 'row',
multipleSelection: true,
rowSelectionChanged: this.rowSelectionChangeddHandler
}
Let me know if you have any additional questions or concerns.
Thanks for your answers.
The reason I use this code in setDetails() function because setting the object with another object even though the other object has the same number of rows and same Primary Key does not reflect the changes in grid. I also bind this object which is coming from master to a div. This Div shows correct information but the grid does not.
HTML:--
[(widgetId)]='id' (cellClick)="cellClickHandler($event)">
My setSpecialCondition method in child.ts
setSpecialCondition(condition: string) { var spCond: Array = JSON.parse(condition); this.specialCondition = spCond;
I also do not know how to rebind the igGrid in Angular 2. So if you can tell me how I can rebind the grid every time if an object send from Master that can also work
For the other issue I verify row change event start working after I use rowSelectionChanged: this.rowSelectionChangeddHandler however the optionChange still throwing me error below. I already updated my igniteui.angular2.ts from the latest git. I noticed that it throws error only for those columns which Column settings are defined in Updating feature. Rest of the columns if they goes in edit mode does not throws any error.
browser_adapter.ts:78 TypeError: Converting circular structure to JSON at Object.stringify (native) at IgGridComponent.IgControlBase.optionChange (http://localhost:11375/lib/spa/components/igGrid/igniteui.angular2.js:153:46) at IgGridComponent.IgGridBase.ngDoCheck (http://localhost:11375/lib/spa/components/igGrid/igniteui.angular2.js:324:18) at DebugAppView._View_Policy0.detectChangesInternal (Policy.template.js:201:51) at DebugAppView.AppView.detectChanges (http://localhost:11375/node_modules/@angular/core/src/linker/view.js:200:14) at DebugAppView.detectChanges (http://localhost:11375/node_modules/@angular/core/src/linker/view.js:289:44) at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:11375/node_modules/@angular/core/src/linker/view.js:220:34) at DebugAppView._View_ExposureManagement0.detectChangesInternal (ExposureManagement.template.js:468:8) at DebugAppView.AppView.detectChanges (http://localhost:11375/node_modules/@angular/core/src/linker/view.js:200:14) at DebugAppView.detectChanges (http://localhost:11375/node_modules/@angular/core/src/linker/view.js:289:44)
My Update settings are below, for all those columns who has special setting define in update and if they goes into edit mode system throw error. For rest of the columns it does not throw any error in edit mode.
{ name: "Updating", enableAddRow: true, addRowTooltip: "Add a row here", cancelLabel: "Click to cancel", cancelTooltip: "Click to cancel", editMode: "cell", enableDeleteRow: true, columnSettings: [ { columnKey: "ProductId", readOnly: true }, { columnKey: "Name", editorType: 'text', required: true, validation: true } ] },
I am attaching my updated App code for your reference.
Hi,
I was playing with the online Angular 2 sample available on below URL and I notice that even that have some issues. After a while the grid does not show updated records.
Please refer the attached picture. the bottom UI shows many rows whereas the Grid only shows few rows.
http://igniteui.github.io/igniteui-angular2/samples/igGrid/igGrid.html
Is there a way I destroy and rebind the grid in Angular 2 or any other solution?
Hello Anilesh,
Unfortunately Angular 2 does not track well changes in nested objects, so it will not track and directly reflect if the dataSource object is replaced, you could change the whole grid option which would trigger the change:
For example:
setDetails(detail: string) {
this.productDetails = JSON.parse(detail);
var opts = this.gridOptions;
opts.dataSource = this.productDetails;
this.gridOptions = opts;
The second issue is with the “required: true” settings in the parent grid’s columnSettings . When you enter edit mode for that column some additional options and event handlers are added internally to the editor options to support validation which cannot then be serialized properly.
You can log a new issue in the related github repository regarding this:
https://github.com/IgniteUI/igniteui-angular2/issues
Regarding the issue with the sample. Could you describe the steps needed to reproduce the issue?
Best Regards,
Maya Kirova
Infragistics, Inc.
http://ko.infragistics.com/support
Thanks for your reply. Even setting the setDetails method as you suggested did not work properly. I had to do some changes in igniteui.angular2 to make it work for few use cases. Not working for other use cases. For example.
1. Initialize child grid with only 1 Product details object. Product id 1 and Product detail id 1.
2. Add 2 new details and Delete the middle row from grid. call getDetails() method to store this information into Product object whose Product Id is 1.
3.Now call setDetails() method and pass Product details object of Product ID 2 to initialize it with different set of ProductDetail object data. Change data and call getDetails() method to store this information into Product object whose Product Id is 1.
4. Again call setDetails() method and pass Product details object of Product ID 1 grid shows different data.
Here are some changes Which I made as a workaround for few of my use cases.
1.I add a new property rebind in IgGrid interface in file igniteui.d
2. Change IgGridBase<Model> class's ngDoCheck method with this code
//check for changes in collection this._changes = this._differ.diff(this._config.dataSource); if (this._config.dataSource.length !== this._dataSource.length) { this._dataSource = JSON.parse(JSON.stringify(this._config.dataSource)); if (this._changes) { this._changes.forEachRemovedItem(r => this.deleteRow(r.item[pkKey])) if (this._config.reBind) { var element = jQuery(this._el), tr = tr = element.find("tr[data-id]"); if (tr.length > 0) { for (i = 0; i < tr.length; i++) { this.deleteRow(tr.data("id")); } } this._config.reBind = false; } this._changes.forEachAddedItem(r => this.addRow(r.item, r.currentIndex)); } }
It looks like the grid need a good amount of testing specially in case of grid Editing. Let me know if Infragistics have some future planned release for Angular 2.
Our Angular 2 product is already officially released as an open source project in github.
If you’d like to contribute to it in any way - log issues you find in the product itself, suggest improvements in the code, tests or samples, please feel free to do so.
You can find the github repository here:
https://github.com/IgniteUI/igniteui-angular2
Since it’s an open source project any changes we might consider for the future will be community driven.
If you find any specific issues with an use case please feel free to log an issue in the repository. However make sure that you add an isolated sample and clear steps needed to reproduce the issue.
Let me know if you have any questions.