Change icon of commands column

Question

I'm using a Grid configured with colums [commands] like this:

this.commands = [{ type: 'Edit', buttonOption: { cssClass: 'e-flat', iconCss: 'e-edit e-icons' } },
                     { type: 'Delete', buttonOption: { cssClass: 'e-flat', iconCss: 'e-delete e-icons' } },
                     { type: 'Save', buttonOption: { cssClass: 'e-flat', iconCss: 'e-update e-icons' } },
                     { type: 'Cancel', buttonOption: { cssClass: 'e-flat', iconCss: 'e-cancel-icon e-icons' } }
                    ];

While using my app, when a condition occurs, I would like to change the command icon of 'Save' to:

 { type: 'Save', buttonOption: { cssClass: 'e-flat', iconCss: 'e-change-scale-ratio e-icons' } },

How can I do?

Thanks

Rajapandiyan Settu · Accepted Answer

Hi Fabio, 

Thanks for your update. 

Based on your requirement, you want to bind custom class on command button while clicking external button. You can achieve your requirement by following way, 






[app.component.ts] 

 
  onClick() { 
    // change the command properties through the Grid instances 
    this.grid.getColumnByIndex(5).commands = [ 
      { 
        type: 'Edit', 
        buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' }, 
      }, 
      { 
        type: 'Delete', 
        buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' }, 
      }, 
      { 
        type: 'Save', 
        buttonOption: { 
          iconCss: 'e-icons e-update', 
          cssClass: 'e-flat e-change-scale-ratio', // add the custom class as you want 
        }, 
      }, 
      { 
        type: 'Cancel', 
        buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' }, 
      }, 
    ]; 
    this.grid.freezeRefresh(); // refresh the Grid 
  } 
 

[app.component.css] 

 
.e-grid .e-change-scale-ratio .e-update::before { 
  content: '\e295'; // bind the custom icon as you want 
} 
 


Sample: https://stackblitz.com/edit/angular-gpxelt-dc4im1?file=app.component.ts 

Please get back to us if you need further assistance with this. 

Regards, 
Rajapandiyan S

Rajapandiyan Settu · Answer

Hi Fabio, 

Thanks for contacting Syncfusion support. 

In your requirement, you want to add/remove the custom class in the Save button based on the condition. Before proceeding with this, we need to know the scenario of your requirement. 


When you want to add/remove the custom class on Save button?
Explain the scenario of your requirement.

Regards, 
Rajapandiyan S

Fabio · Answer

Is simple, when I click on button, the cusom class icon of update button must be changed:https://stackblitz.com/edit/angular-gpxelt?file=app.component.html