Using Slickgrid Universal 4.7.0, checkbox column not displayed with Salesforce LWC, header displayed not for rows

Question

I am create a LWC component using Slickgrid Universal 4.7.0 for custom datatable. However I can not set the checkbox column correctly. How can I config the option for this?

I already set the gridOption by (Row Selection)[https://ghiscoding.gitbook.io/slickgrid-universal/grid-functionalities/row-selection] as follows.

  enableAutoResize: true,
  enableCellNavigation: true,
  enableCheckboxSelector: true,
  enableRowSelection: true,
  rowSelectionOptions: {
    // True (Single Selection), False (Multiple Selections)
    selectActiveRow: false
  },

But screen is... enter image description here

onSelectedRowsChange event worked for SelectAll checkbox on filter header. But not for single row. Any other options are effected to this?

Please help on this.

And I want a screen like demo. enter image description here

By inspection, <input> and <label> tags are not created for each rows without any errors. — goodGhost
– goodGhost, Commented Jun 13, 2024 at 7:08
Perhaps the DocumentFragment class used to create the checkboxSelectionColumn is not supported by LWC, is there another way to replace it? — goodGhost
– goodGhost, Commented Jun 13, 2024 at 9:35

ghiscoding · Accepted Answer · 2024-06-13 13:48:58Z

0

As you found out DocumentFragment are not supported by Salesforce and there are other settings that might be different as well. You can use preventDocumentFragmentUsage: false to disable fragment but it is recommended to simply use useSalesforceDefaultGridOptions: true in your grid options which is a better set of grid options for Salesforce and it was mentioned in the docs.

this.gridOptions = {
  useSalesforceDefaultGridOptions: true,
  enableAutoResize: true,
  enableCellNavigation: true,
  enableCheckboxSelector: true,
  enableRowSelection: true,
  rowSelectionOptions: {
    // True (Single Selection), False (Multiple Selections)
    selectActiveRow: false
  },
};

answered Jun 13, 2024 at 13:48

ghiscoding

13.4k8 gold badges76 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

goodGhost Over a year ago

I already set 'useSalesforceDefaultGridOptions' to true, without it Salesforce won't display the grid. However, the 'checkboxSelectorColumn' option doesn't seem to be affected by 'preventDocumentFragmentUsage:false'. I think the problem is that the 'createCheckboxElement' method in the source code 'slickCheckboxSelectColumn.ts' is supposed to use DocumentFragment only.

goodGhost Over a year ago

Modify the 'createCheckboxElement' code to use a span element instead of a DocumentFragment and build it, and it should show up on the screen at least. I need to check for events.

ghiscoding Over a year ago

I already answered with the correct solution, just try it. That is what we use in our Salesforce

Collectives™ on Stack Overflow

Using Slickgrid Universal 4.7.0, checkbox column not displayed with Salesforce LWC, header displayed not for rows

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related