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

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

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

Solution

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
  },
};