How to show different action column icons for each record in ejs-grid based on dataSource

[Harshit Goel]

Hi Team,

I have ejs-grid having some dataSource. I want to show different icons in a column named as Actions for different records based on the documentType property coming in dataSource like if documentType is Folder I want to show Add icon and If documentType is File, I want to show Open File Icon. How can I do this. 

Please help me to solve the query.

Thanks and Regards

Harshit Goel

[Santhosh Iruthayaraj]

Hi Harshit Goel,

Greetings from Syncfusion support.

Based on your query, we understand that you want to display different custom Command Column buttons depending on the value of a specific field in the dataSource. You can achieve this by utilizing the “rowDataBound“ event of the Grid component. We have prepared a code snippet and a sample for your reference. Please find them below:

[app.component.html]

 

 <ejs-grid

    [dataSource]="data"

    allowPaging="true"

    [editSettings]="editSettings"

    (rowDataBound)="rowDataBound($event)"

  >

    <e-columns>

     .  .  .  .  .

      <e-column

        headerText="Actions "

        width="200"

        [commands]="commands"

      ></e-column>

    </e-columns>

  </ejs-grid>

 

[app.component.ts]

 

export class AppComponent {

  public commands: CommandModel[];

 

  public ngOnInit(): void {

    .  .  .  .  .
    this.commands = [

      {

        buttonOption: {

          iconCss: 'e-icons e-add',

          content: 'Add Folder',

          cssClass: 'e-flat folder-btn',

        },

      },

      {

        buttonOption: {

          iconCss: 'e-icons e-open-link',

          content: 'Open File',

          cssClass: 'e-flat file-btn',

        },

      },

    ];

  }

 

  rowDataBound(args) {

    if (args.data.documentType === 'Folder') {

      args.row.querySelector('.file-btn').style.display = 'none';

    } else if (args.data.documentType === 'File') {

      args.row.querySelector('.folder-btn').style.display = 'none';

    }

  }

}

 

Sample: https://stackblitz.com/edit/angular-grid-custom-command-column

rowDataBound API: https://ej2.syncfusion.com/angular/documentation/api/grid/#rowdatabound

To handle the Command Column Button click, you can utilize the commandClick event of the Grid.

commandClick API: https://ej2.syncfusion.com/angular/documentation/api/grid/#commandclick

Please let us know if you have any further queries.

Regards,

Santhosh I