Why I am getting col.foreignColumn is not a function when trying to change [columns] variable dynamically in stacked header

[Hassan]

This is my grid html

<ejs-grid #GridGirls id='GridGirls' [toolbar]='toolbarOptions'

                                [dataSource]='finalDataSource_girls.data' [allowSorting]="true" [allowPaging]="false"

                                [allowPdfExport]='true' [allowExcelExport]='true' (toolbarClick)='toolbarClick($event)'

                                [sortSettings]='sortOptions' [allowResizing]="true"

                                (queryCellInfo)='onQueryCellInfo($event)'>

                                <e-columns>

                                    <e-column field='year' headerText='Year' textAlign='Right' width=75

                                        [sortComparer]='sortComparer'></e-column>

                                   

                                    <e-column [columns]="girlsColumns" headerText="Girls Percentage">

                                        <ng-template #headerTemplate let-column>

                                          <div>

                                            <span>{{Summary (' + period +')' | translate}}</span>

                                          </div>

                                        </ng-template>

                                      </e-column>

                                </e-columns>

Initally it loads perfectly, but on a button click, I am trying to update  girlsColumns  values but it doesn't work and gives this error on console. There is no foreign key defined in my columns data

[Johnson Soundararajan S]

Hi Hassan,

Thank you for reaching out to us.

When attempting to dynamically change the columns of a grid within a stacked header, it doesn't function as expected and results in a script error appearing in the console. I've made an effort to create a sample that aligns with your specifications. However, we haven't been able to replicate the issue you've described.

Please refer to the below sample for more information.

Sample : Syncfusion-content - Ej2 Angular Docs (forked) - StackBlitz

If you are still experiencing the problem, please share with us your attempts to reproduce the reported issue using the attached sample.

Regards,

Johnson Soundararajan S