Loops/Arrays in Angular Child Grid

[Daniel Tam]

Hi,

I'm trying to run a loop within the child grid column cells.  I know I can target the array elements manually but I'm having trouble running a loop:

public childGrid: GridModel | GridComponent = {

  queryString: 'customerId',

  dataSource: this.contactChildData,

  columns: [

      { field: 'customerId', headerText: 'Customer ID', width: 90 },

      { field: 'title', headerText: 'Employer Title', width: 100 },

      { field: 'email', headerText: 'Employer Title', width: 100 },      

      { field: 'phone', headerText: 'Phones', width: 120,  

        template: '<div>${phone[0].phoneType}: ${phone[0].phoneNumber} <br> ${phone[1].phoneType}: ${phone[1].phoneNumber} </div>' },

       { field: 'isEmployed', headerText: 'Association Status', width: 100,

        template: '<div>${isEmployed ? "Active" : "Inactive"}</div>'

       }

  ],

  load() {

      (this.parentDetails as ParentDetails).parentKeyFieldValue = (<{ customerId?: string }>(this.parentDetails as ParentDetails).parentRowData)['customerId'];  

  }

};

This is what I'm trying to do:

[Aishwarya Rameshbabu]

Hi Daniel Tam,

Greetings from Syncfusion support.

Upon reviewing your inquiry, it appears that you are experiencing difficulties with looping in templates within the childGrid of the Syncfusion Grid. Kindly consult the provided documentation link for detailed information on utilizing templates in the childGrid. Additionally, we have developed a sample that demonstrates looping over the data in the childGrid template. Please refer to the code example, sample, and screenshot for further assistance.

App.component.ts

 

<ejs-grid [dataSource]='parentData' [childGrid]='childGrid'>

                    <e-columns>

                        <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=80></e-column>

                        <e-column field='FirstName' headerText='FirstName' width=100></e-column>

                        <e-column field='LastName' headerText='Last Name' width=100></e-column>

                        <e-column headerText='Phone' width=100><ng-template #template let-data>

                            <div *ngFor="let phone of data.phone">

                                {{phone.phoneType}}: {{phone.phoneNumber}} <br>

                            </div>

                            </ng-template></e-column>

                    </e-columns>

                </ejs-grid>

                <ng-template #childtemplate let-data>

                    <div *ngFor="let phone of data.phone">

                        {{phone.phoneType}}: {{phone.phoneNumber}} <br>

                    </div>

                </ng-template>

 

 

 @ViewChild('childtemplate', { static: true }) public childtemplate?: any;

 

this.childGrid = {

            dataSource: data,

            queryString: 'EmployeeID',

            load() {

                this.registeredTemplate = {};   // set registerTemplate value as empty in load event

            },

            columns: [

                { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 90 },

                { field: 'CustomerID', headerText: 'Customer ID', width: 100 },

                { field: 'ShipCity', headerText: 'Ship City', width: 100 },

                { field: 'ShipName', headerText: 'Ship Name', width: 120 },

                { headerText: 'Phone', textAlign: 'Center', template: this.childtemplate, width: 120 },

            ],

        };

 

 

Sample: https://stackblitz.com/edit/github-pw8nps-44puym?file=src%2Fdatasource.ts,src%2Fapp.component.ts

Documentation Link: Template-column-in-child-grid

Screenshot:

If you need any further assistance or have additional questions, please feel free to let us know.

Regards

Aishwarya R

[Daniel Tam]

That worked great!  Thank you!

[Aishwarya Rameshbabu]

Hi Daniel Tam,

You are most welcome! Please get back to us if you need any other assistance.

Regards

Aishwarya R