Page 1 of 1

[Salesforce] Grid: FA icons occasionally fail to render when row grouping is enabled

Posted: Tue Aug 16, 2022 11:21 pm
by mkelch

We are developing an LWC that uses the Grid library. We have noticed that when row grouping is enabled, there's a chance for Font Awesome icons within the table to disappear when quickly scrolling away from and back to a row. When the row grouping feature is disabled the issue is not reproducible.

Attached is a video demo of this happening in our Salesforce org.

I've also attached the full JS file for our LWC. Below are some snippets from the JS showing the grid and column config:

this.grid = new bryntum.grid.Grid({
  appendTo: this.template.querySelector("div.grid-container"),
  columns: this.columns,
  store: this.rowDataStore,
  features: {
      group: {
          field: "target",
          renderer: ({ groupRowFor, isFirstColumn }) => {
              if (!isFirstColumn) {
                  return "";
              }
              return groupRowFor ? "Targets" : "Non-Targets";
          },
      },
  },
});
this.columns = [
  {
    id: "target",
    field: "target",
    icon: "b-fa b-fa-bullseye",
    width: 70,
    locked: true,
    align: "center",
    resizable: false,
    renderer: ({ value }) =>
        value ? { tag: "i", class: "b-fa b-fa-bullseye target-icon" } : "",
  },
];

Thanks in advance for your feedback!


Re: [Salesforce] Grid: FA icons occasionally fail to render when row grouping is enabled

Posted: Thu Aug 18, 2022 11:47 am
by Maxim Gorkovsky

Hello.
Which grid version do you use?


Re: [Salesforce] Grid: FA icons occasionally fail to render when row grouping is enabled

Posted: Thu Aug 18, 2022 3:35 pm
by mkelch

Hello, we are currently on version 5.1.0 of the LWC module.


Re: [Salesforce] Grid: FA icons occasionally fail to render when row grouping is enabled

Posted: Thu Aug 18, 2022 4:04 pm
by Maxim Gorkovsky

Version 5.1.0 has a serious bug: https://github.com/bryntum/support/issues/4979 Can you try upgrading to 5.1.1 release?


Re: [Salesforce] Grid: FA icons occasionally fail to render when row grouping is enabled

Posted: Thu Aug 18, 2022 4:45 pm
by mkelch

Thanks for the feedback. However, I was able to reproduce the issue with the 5.1.1 release.


Re: [Salesforce] Grid: FA icons occasionally fail to render when row grouping is enabled

Posted: Mon Aug 22, 2022 8:47 am
by Maxim Gorkovsky

Reproduced, ticket opened here: https://github.com/bryntum/support/issues/5094 Thank you for report.

There is a workaround you can apply to fix this problem on the app level - you need to always return Object from the renderer:

renderer  : ({ value }) => (value ? { tag : 'i', class : 'b-fa b-fa-bullseye target-icon' } : { html : '' })

Re: [Salesforce] Grid: FA icons occasionally fail to render when row grouping is enabled

Posted: Mon Aug 22, 2022 3:15 pm
by mkelch

Excellent, thank you for the workaround!