Customize command

[Toan Bui]

Hi, have a nice day. I want to customize the command but I can't find a list of icons for it. Can you help me?

[Rajapandiyan Settu]

Hi Toan, 

 

Thanks for contacting Syncfusion support. 

 

Based on your query, we suspect that you want to customize the command button in EJ2 Grid. In the iconCss property of command column, you can bind the CSS class as you want. By using this class you can render the icons in the command button. Please find the below code example and documentation for your reference. 

 

Command column: https://ej2.syncfusion.com/angular/documentation/grid/edit/#custom-command 

 

 

[app.component.html] 

 

 

    <ejs-grid [dataSource]='data' allowPaging='true' [toolbar]="toolbar" [editSettings]='editSettings' 

        (commandClick)='commandClick($event)'> 

        <e-columns> 

            ---- 

            <e-column headerText='Manage Records' width='160' [commands]='commands'></e-column> 

        </e-columns> 

    </ejs-grid> 

 

 

 

[app.component.ts] 

 

 

@Component({ 

  selector: 'app-root', 

  templateUrl: 'app.component.html', 

  styleUrls: ['app.component.css'], 

  encapsulation: ViewEncapsulation.None, 

  providers: [EditService, PageService, CommandColumnService] 

}) 

export class AppComponent { 

  --- 

  public commands: CommandModel[]; 

 

  public ngOnInit(): void { 

    --- 

    this.commands = [ 

      { 

        buttonOption: { 

          content: 'Details', 

          iconCss: 'e-icons customicon', 

          cssClass: 'e-flat' 

        } 

      } 

    ]; 

  } 

} 

 

 

 

[app.component.css] 

 

 

.customicon::before { 

  content: '\e267'; // bind the icon as you want 

} 

 

 

 

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

 

Find the list of available icons in the EJ2 Components from the below link,

https://ej2.syncfusion.com/angular/documentation/appearance/icons/#available-icons

please get bac to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S 

[Toan Bui]

I did it. Thank you so much

[Rajapandiyan Settu]

Hi Toan, 

 

We are glad that you have achieved your requirement.

please get back to us if you need further assistance. 

 

Regards, 

Rajapandiyan S