We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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

5 Replies

PS Pavithra Subramaniyam Syncfusion Team September 10, 2019 12:39 AM

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 }]; 
    } 
 
 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards,  
Pavithra S. 



IF Ihya Fauzi replied to Pavithra Subramaniyam August 15, 2021 12:21 PM

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!



RR Rajapandi Ravi Syncfusion Team August 16, 2021 05:57 AM

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 



IF Ihya Fauzi replied to Rajapandi Ravi August 16, 2021 08:07 AM

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


RR Rajapandi Ravi Syncfusion Team August 17, 2021 04:59 AM

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 }]; 
            } 



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 


Loader.
Live Chat Icon For mobile
Up arrow icon