Add new columns to Grid with grid.colums.push results in Error TS2349

[Peter Falz]

Hi Syncfusion-Team,

i tried to add new columns to Grid with grid.colums.push.

This results in Error TS2349 in Visual Studio before compiling.

How have i to do this the right way?
Maybe you can show me an example that works. :)

<ejs-grid #testGrid id='grid' class="margin-top-10 expense-grid-margin pane" height='100%' width='100%'
          allowPaging='true' [allowSorting]="true" allowSelection='false'
          [dataSource]='jsonDataWebService.DataList' [editSettings]='editSettings' [toolbar]='toolbarValue'
          (created)='onGridCreated()' (actionBegin)='onGridActionBegin($event)' (actionComplete)='onGridActionComplete($event)'
          (cellSave)='onGridCellSaved($event)'
          >
    <e-columns>
        <e-column width='100' textAlign='Center'>
            <ng-template #template let-data>
                <button id="gridEdit" type="button" title="Edit" class="e-lib e-btn e-control e-flat e-icon-btn e-edit-delete e-editbutton" (click)='onGridButtonEditClicked($event)'>
                    <span class="e-btn-icon e-icons e-edit"></span>
                </button>
                <button id="gridDelete" type="button" title="Delete" class="e-lib e-btn e-control e-flat e-icon-btn e-edit-delete e-deletebutton" (click)='onGridButtonDeleteClicked($event)'>
                    <span class="e-btn-icon e-icons e-delete"></span>
                </button>
            </ng-template>
        </e-column>
    </e-columns>
</ejs-grid>

let c = <Column[]>
        [ new Column( { field: "Id", headerText: "ID", width: "75", isPrimaryKey: true } ), 
          new Column( { field: "Key", headerText: "Key", width: "300" } ), 
          new Column( { field: "Name", headerText: "Name", width: "300" } ), 
          new Column( { field: "DateCreated", headerText: "Date Created", width: "200" } )
        ];
 
for( let i: number = 0; i < c.length; i++ ) {
    this.grid.columns.push( c[ i ] );
}
 
        // Test 2
        this.grid.columns.push( c );
 
 
        // Test 3
        let gc = this.grid.columns;
 
for( let i: number = 0; i < gc.length; i++ ) {
    this.grid.columns.push( gc[ i ] );
}

Fehler TS2349 (TS) Ein Ausdruck, dessen Typ eine Aufrufsignatur fehlt, kann nicht aufgerufen werden. Der Typ "((...items: string[]) => number) | ((...items: Column[]) => number) | ((...items: ColumnModel[]) => number)" weist keine kompatiblen Aufrufsignaturen auf.

Hope for help,

habe a nice day,

Peter

[Pavithra Subramaniyam]

Hi Peter, 

 

Greetings from Syncfusion support. 

 

You can update the Grid columns by using the below way. Please refer to the below code example and sample link for more information. 

 

[Component.ts] 

@Component({ 

    selector: 'app-root', 

    template: '<button (click)="click($event)">Columns</button> 

    <ejs-grid #grid [dataSource]='data' 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>           

        </e-columns> 

    </ejs-grid>' 

}) 

export class AppComponent { 

    .  .  . 

    click(e){ 

    let c = <Column[]> 

        [  { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' }, 

                { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' }, 

                { field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format: 'yMd', textAlign: 'Right' }, 

                { field: 'ShipCountry', headerText: 'Ship Country', width: 150 } 

        ]; 

        for( let i: number = 0; i < c.length; i++ ) { 

    (this.grid.columns as Column[]).push( c[ i ] ); 

    this.grid.refreshColumns(); 

} 

  

    } 

} 

 

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

 

Please get back to us if you need any further assistance on this. 

 

Regards,  

Pavithra S. 

[Peter Falz]

thx for your help :)
Regards,

Peter

[Pavithra Subramaniyam]

Hi Peter, 

 

Thanks for your update. 

 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

 

Regards, 

Pavithra S.