How to change field on ejs-grid when event button clicked?

[Ihya Fauzi]

Can i use code like this? use [field]

<e-column [field]="nama" [customAttributes]="customAttributes" headerText="Asset Name"></e-column>

[Thiyagu Subramani]

Hi Ihya, 

Thanks for contacting Syncfusion support. 

To achieve this requirement we suggest you to refresh the Grid columns using refreshColumns after changing the field name using button click. Please refer to the below code and sample link for more reference. 

 <e-column [field]='name' headerText='Order ID' width='120'></e-column> 

btnClick(args) { 

    (this as any).name = 'EmployeeID'; 

    this.grid.refreshColumns(); 

  } 

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

API: https://ej2.syncfusion.com/angular/documentation/api/grid/#refreshcolumns  - Refreshes the Grid column changes. 

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

Regards, 

Thiyagu S 

[Ihya Fauzi]

Thankyou very much, for the answer. Im using this method

<ng-template #template let-data>

            {{ data.asset_name }}

            {{ data.nama }}

          </ng-template>

[Ihya Fauzi]

Another Question, can you please watch the video? sorry for bad english

Attachment: 20210818_122928_e565549.zip

[Rajapandiyan Settu]

Hi Ihya, 

Thanks for your update. 

 

Query: How to change field on ejs-grid when event button clicked? 

Kindly use the below code example to replace the column with another column. 

 

btnClick(args) { 

    if (this.grid.getColumnByField('CustomerName')) { 

      // get the column index 

      var index = this.grid.getColumnIndexByField('CustomerName'); 

      if (index > -1) { 

        //  replace the previous column with new column using its index position. 

        this.grid.columns[index] = { 

          field: 'ShipCity', 

          headerText: 'Ship City', 

          template: '<div>${ShipCity}</div>', 

          width: 150 

        }; 

        // refresh the Grid to affect the changes in UI 

        this.grid.refreshColumns(); 

      } 

    } 

} 

 

getColumnByField: https://ej2.syncfusion.com/angular/documentation/api/grid#getcolumnbyfield 

getColumnIndexByField: https://ej2.syncfusion.com/angular/documentation/api/grid#getcolumnindexbyfield 

refreshColumns: https://ej2.syncfusion.com/angular/documentation/api/grid#refreshcolumns 

sample: https://stackblitz.com/edit/angular-8l2dtt?file=app.component.ts 

Query #2: Another Question, can you please watch the video? 

We are unable to reproduce the reported behavior (“search query is not send when perform paging action in the Grid”) at our end. Kindly share the below details to validate further. 

1. Share the full Grid code file you have used.
2. Which type data-binding you have used? Share the Adaptor details.
3. How could you perform the searching operation in the Grid? share the code details.
4. If possible share a simple issue reproducible sample.

Regards,  

Rajapandiyan S