Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Anilesh Lakhtakia
190
Angular 2 Master detail component Grid binding
posted

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

 

  1. 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.
  2. 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
  • 29417
    Offline posted

     

    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.

  • 29417
    Offline posted

    Hello Anilesh, 

    Thank you for posting in our forum. 

    I’ve looked through your code and it seems that there are some issues in the setDetails function you’ve specified.  

    The second check in the function seems to be incorrect: 

    setDetails(detail: string) {

         var details: Array<ProductDetails> = JSON.parse(detail); 

    …

            } else if (this.productDetails.length == detail.length) {

                for (var i = 0; i < detail.length; i++) {

                    this.productDetails[i].ProductDetailsId = details[i].ProductDetailsId;

                    this.productDetails[i].Name = details[i].Name;

                    this.productDetails[i].Description = details[i].Description;

                    this.productDetails[i].Type = details[i].Type;

                    //jQuery("#gridSpecialCondition").data("igGrid").dataSource = this.specialCondition;

                    //jQuery("#gridSpecialCondition").data("igGrid").dataBind();

                }

            }

        } 

    Note that in the else if statement you’re using the string detail instead of the parsed array details. This will always return false so the values the second grid is bound to will never be changed.

     Also if the  ProductDetailsId  value is the primary key value for the details grid, you should not modify it. The grid cannot handle updates where the primary key is changed so you should either not change it or if that filed has to change then create a separate column (which can be hidden) that will act as a primary key.

     Let me know if you have any questions.  

    Best Regards,

    Maya Kirova

    Infragistics, Inc.

    http://ko.infragistics.com/support