adding an icon into the checkbox column

[Huifei Rao]

Hi, I have an ejs-grid control in the web page as shown below. I'd like to add an icon (beside the checkbox). Which icon to display depends on the status (active or inactive) of the device. Is it possible? If yes, how? Thanks.

[Rajapandiyan Settu]

Hi Huifei,

Thanks for contacting Syncfusion support.

Query: I'd like to add an icon (beside the checkbox). Which icon to display depends on the status (active or inactive) of the device.

By using queryCellInfo event of the Grid, you can dynamically append the custom element in the checkbox type column.

queryCellInfo: https://ej2.syncfusion.com/angular/documentation/api/grid/#querycellinfo

 

[app.component.ts]

 

  queryCellInfo(args) {

    if (args.column.type == 'checkbox') {

      var span = document.createElement('span'); // create the span element

      args.data['Status'] == 'Active' ? span.classList.add('active_device', 'e-icons') : span.classList.add('inactive_device', 'e-icons');

      // append the custom element inside the checkbox type cell

      args.cell.appendChild(span);

    }

  }

 

[index.html]

 

    <style>

      .active_device:before {

        content: '\e614';

        color: green;

      }

      .inactive_device:before {

        content: '\e60a';

        color: red;

      }

    </style>

 

Sample: https://stackblitz.com/edit/angular-jwmlmr?file=app.component.html,app.component.ts,index.html

Note: The provided solution is used only for display purposes.

Please let us know if you have any concerns.

Regards,

Rajapandiyan S

[Huifei Rao]

Thanks for the reply.

For some reason, I don't see the icons in the sample provided. Below is what I see . Could you please double check? Thanks

[Rajapandiyan Settu]

Hi Huifei,

Sorry for the inconvenience caused.

We have increased the checkbox column width to show the custom element properly in the UI. Please find the modified sample for your reference.

Sample: https://stackblitz.com/edit/angular-jwmlmr-ibquto?file=app.component.html,app.component.ts,index.html

Please let us know if you have any concerns.

Regards,

Rajapandiyan S

[Huifei Rao]

Thanks. The sample works great!

I managed to use the same approach and show text of different colors for inactive and active devices. However, I can't make the icon work.

[Huifei Rao]

Never mind. I figured out the problem and have icon displayed.  Thanks a lot!

[Rajapandiyan Settu]

Hi Huifei,

We are glad to hear that you have resolved the reported problem by yourself.

Please get back to us if you need further assistance.

Regards,

Rajapandiyan S