Adding columns dynamically

[Samir Varteji]

I am adding the columns dynamically and getting a console error saying column.getDomSetter is not a function and the header disappeared.

<ejs-grid

#fulfilmentGrid

[dataSource]="fulfilments$ | async">

<e-columns>

<e-column *ngFor="let col of gridColumns" [field]="col.field" [headerText]="col.headerText">

e-column>

e-columns>

ejs-grid>

this.gridColumns = [

{

field: 'status',

headerText: 'Status',

},

{

field: 'batchNumber',

headerText: 'Batch Number',

},

{

field: 'carrierService',

headerText: 'Carrier Service',

},

{

field: 'deliveryService',

headerText: 'Delivery Service',

},

];

The data is binding but the column header disappeared and then any features are not working.

I am using version 20.2.36.

[Rajapandiyan Settu]

Hi Samir,

Thanks for contacting Syncfusion support.

We tried to reproduce the reported problem with the provided code example but it was unsuccessful from our side. Find the below sample for your reference.

Sample: https://stackblitz.com/edit/angular-av8fmg?file=app.component.ts,app.component.html

Kindly share the following details to validate this further.

1. Share the complete Grid code files you have used (highly recommended).
2. How could you bind the data to the Grid? Share the complete code (app.component.ts).
3. Which type of data-binding is used in the Grid (local/remote/custom-binding)?
4. Are you binding the column Settings based on the API response?
5. If you are using custom data-binding (observables), kindly refer to the below documentation.
   https://ej2.syncfusion.com/angular/documentation/grid/observables/
6. If possible, share the issue reproducible sample or try to replicate the issue in given sample.

Regards,

Rajapandiyan S