Angular 2 Master detail component Grid binding

190

Anilesh Lakhtakia posted over 8 years ago

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

In igniteui.angular2.ts file optionChange() throws error when grid goes to edit mode. This line this._opts = JSON.parse(JSON.stringify(opts)); throws error on master grid.
rowSelectionChanged event is not working in master component.

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

App.rar

Parents

No Data

Reply

29417

Offline Maya Kirova posted over 8 years ago

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.
Cancel
Reply

Cancel

Children

190

Anilesh Lakhtakia posted over 8 years ago in reply to Maya Kirova

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)">

Details info Coming from master

{{detail.Name}}
{{detail.Description}}
{{detail.Type}}

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.

-Anilesh

App.rar
Cancel
Reply

Cancel