How to change all EJS grid columns on button click event?

[Jayjit Pandit]

Please let me know how I can change all EJS grid columns to new one on button click event?

[Pavithra Subramaniyam]

Hi Marko, 

 

Thanks for contacting Syncfusion support. 

 

You can change the Grid columns dynamically by setting the “grid.columns” property. Please refer to the below code example, documentation link and sample link for more information. 

 

[component.ts] 

click(){ 

this.grid.columns = [ { 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 }]; 

    } 

 

 

Documentation : https://ej2.syncfusion.com/documentation/api/grid/#columns 

 

Sample               : https://stackblitz.com/edit/angular-gpjayn-8kzhgd?file=app.component.ts 

 

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

 

Regards,  

Pavithra S. 

[Ihya Fauzi]

How can i make the field to default one from HTML? 

And, Can i put button click event on column components?

Please, Answer i need this!

[Rajapandi Ravi]

Hi Ihya, 

Thanks for the update 

Before we start providing solution on this query, we need some information for our clarification. So please confirm the below requirement scenarios that would be helpful for us to provide better solution. 

1)      Please confirm you like to add columns dynamically by using HTML elements. 

2)      Please confirm if you are rendering any custom components in your columns and like to bind the click event for your custom component. 

3)      If you like to bind the click event for your custom component, please share that column information. 

4)      Please share your exact requirement scenario and share the details about what you are trying to do in button click event. 

Regards,
Rajapandi R 

[Ihya Fauzi]

HTML

<div class="general-content">

<formly-form

[form]="searchBar.formGroup"

[fields]="searchBar.fields"

(change)="changeData($event, 'search')"

>formly-form>

<div class="row justify-content-end" style="margin-top: 5px; margin-right: 15px">

<button class="bci-button-petronas" data-ripple="true" (click)="onSearchAsset()">

<span class="fas fa-search">span> Search

button>

div>

div>

<e-columns>

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

<e-column field="asset_type" [customAttributes]="customAttributes" headerText="Type"> e-column>

<e-column textAlign="Center" [customAttributes]="customAttributes">

<ng-template #template let-data>

<button class="bci-button-petronas" id="targetButton" (click)="openAssetDetailModal(data)">

<span class="fas fa-eye">span>

button>

<button class="bci-button-petronas" id="targetButton" (click)="editAssetDetailModal(data)">

<span class="fas fa-edit">span>

button>

ng-template>

e-column>

e-columns>

Components

async onSearchAsset() {

try {

this.spinner.show();

this.assetGrid.columns = [

{

field: 'asset_name',

headerText: 'Asset Name',

customAttributes: {

class: 'headerTable',

},

},

{

field: 'asset_func_loc',

headerText: 'Asset Funcloc Name',

customAttributes: {

class: 'headerTable',

},

},

];

await this.LevelService.execute(this.dataSearch, this.searchBar.formGroup.value);

console.log('dataSearch :', this.dataSearch);

this.toastr.success('Search Successful');

} catch (e) {

this.toastr.error('An Error Has Occured');

} finally {

this.spinner.hide();

}

}

I want function that revert the field to default one

[Rajapandi Ravi]

Hi Ihya, 

Thanks for the update 

We have checked your shared information and we suspect that you like to change the Grid columns in button click event. If your changed columns were existing in your Grid datasource, the column was displayed with values. If your changed columns were not existing in your Grid datasource, the column was displayed with blank. Please refer the below code example and sample for more information. 

export class AppComponent { 

    public data: Object[]; 

    public initialPage: Object; 

    @ViewChild('grid',{static :false}) 

    public grid:GridComponent; 

    ngOnInit(): void { 

        this.data = data; 

        this.initialPage = { pageSizes: true, pageCount: 4 }; 

    } 

    click(){ //button click event 

        this.grid.columns = [ { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' }, 

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

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

                        { field: 'ShipCountry', customAttributes: { class: 'customcss' }, headerText: 'Ship Country', width: 150 }]; 

            } 

} 

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

If we misunderstood anything wrongly, please share the below details that will be helpful for us to provide better solution.  

1)       Share us your exact requirement scenario with detailed description. 

2)       Explain your requirement scenario with pictorial representation. 

3)       Please share issue scenario in video demonstration format. 

4)       Please share any issue reproducible sample or please modify the above sample as per your application structure and try to reproduce the issue. 

Regards, 

Rajapandi R