adding column dynamically getting error

[Kalyan Kumar]

ERROR TypeError: list.getProperties is not a function

    at ComponentBase.push../node_modules/@syncfusion/ej2-angular-base/src/component-base.js.ComponentBase.ngAfterContentChecked (component-base.js:228)

    at GridComponent.ngAfterContentChecked (ej2-angular-grids.js:528)

[Vignesh Sivagnanam]

Hi Kalyan 

Based on your query we suspect that you are facing script error when you add the columns dynamically. So, we have prepared a sample and dynamically adding the column to the grid but we unable to reproduce the mentioned issue at our end. 

Please find the code example:  

 

 

<button ej-button id='enable' cssClass='e-flat' (click)='add()'>ADD</button> 

    <ejs-grid #grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='350'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 

            <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column> 

--------------------------------------------- 

add() { 

     var obj = { field: "ShipCity", headerText: 'NewColumn', width: 120 }; 

     this.grid.columns.push(obj as any);   //you can add the columns by using the Grid columns method 

     this.grid.refreshColumns(); 

} 

Sample : https://stackblitz.com/edit/angular-f7cd3c-snxfur?file=app.component.html 

In above sample we will call the refreshColumns method to get the newly added columns in the grid. So, please ensure you have used refreshColumns method to add new columns in the Grid.  

If you still face the issue please share the below details that will be helpful for us to a provide better solution. 

1.  Share your complete Grid rendering code.  

2.  Share the code example of adding the dynamic columns.  

3. If possible please replicate the problem with our above attached sample. 

4.  Please share your Syncfusion package version. 

Regards, 

Vignesh Sivagnanam 

[Kalyan Kumar]

same error is coming adding the columns dynamically by ngfor, im sharing the code look at once and syncfuion grid version is :  "@syncfusion/ej2-angular-grids": "^18.2.59",

<button (click)="add()">Click</button>

<ejs-grid #grid [dataSource]='data' [childGrid]=' childGrid' [selectionSettings]='selectionOptions'

(queryCellInfo)='customiseCell($event)' [allowSelection]='true' [allowSorting]='true' [enableHover]='false'

[filterSettings]='filterOptions' [allowFiltering]='true'[allowPaging]='tableProperties.pagination' [pageSettings]='tableProperties.pageSetting' allowTextWrap='false' allowReordering='false'

(dataBound)='dataBound()' [sortSettings]='sortOptions' (rowSelected)='rowSelected($event)'>

<e-columns>

<e-column type='checkbox' [allowFiltering]='false' [allowSorting]='false' width='45'></e-column>

<e-column *ngFor="let column of parentColumns" [field]='column.field' [headerText]="column.headerText"

[allowSorting]='column.allowsort' [customAttributes]='column.customAttributes'

[allowFiltering]='column.allowfilter' [filter]='column.filter' [width]="column.width"

[format]="column.format" [textAlign]="column.textAlign" [template]='column.template'>

</e-column>

               </e-columns>

</ejs-grid>

add() {

var obj = { field: "ShipCity", headerText: 'NewColumn', width: 120 };

this.parentColumns.push(obj);

this.grid.refreshColumns();

}

[Thomas Edwards III]

At Kaylan Kumar, we had a similar issue. That was solved with *ngIf and checking the length of our data source. This should ensure that the data is present when the grid is rendered. 

 *ngIf="data.length>0 && parentColumns.length>0" (revised)

Hope it helps.

[Vignesh Sivagnanam]

Hi Kalyan, 

Thanks for the update  

We checked the code example and found that you want to add Column dynamically by “ngFor”. We have prepared a sample based on your requirement to add the dynamically to the grid. Please refer the below sample and Code example for your reference. 

Code Example :  

<button id='btn'  (click)='addColumn($event)'>Add Column </button> 

    <ejs-grid #grid  [dataSource]='data' allowSorting='true' showColumnChooser='true' [toolbar]="toolbar"  allowPaging='true' height=365 [pageSettings]='initialPage' [childGrid]='childGrid'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 

            <e-column field='Freight' headerText='Freight' width='100' format='C2' textAlign='Right'></e-column> 

            <e-column field='ShipCountry' headerText='Ship Country' width='100'></e-column> 

            <e-column *ngFor="let col of columns" field='{{col.fieldName}}' 

        headerText='{{col.headerName}}' width='100'> 

      </e-column> 

        </e-columns> 

    </ejs-grid> 

Sample : https://stackblitz.com/edit/angular-gknz17-mfjcnd?file=app.component.ts 

Regards, 

Vignesh Sivagnanam 

[Nahom Ersom]

@Thomas Edwards III Thanks a lot. you have no idea how much you've helped me.

[Rajapandi Ravi]

Hi Nahom,

Most Welcome, Please get back to us if you need further assistance with this.

Regards,

Rajapandi R