Using Bryntum Grid in Salesforce Lightning Applications
Salesforce Lightning allows using 3rd party JS libraries to create web applications. In this guide we will briefly explain our level of support as well as known problems and challenges.
Lightning Locker
Lightning Locker is a security architecture for Lightning components (see here for details). Locker Service isolates components in a way which requires us to adapt our library code to this isolated environment. Starting from API version 40 Lightning Locker is on by default. As of version 4.1.0 of our component suite, we offer support for it.
Bryntum Grid relies on a number of native Web APIs, some of which are modified (or completely blocked) by Lightning Locker. We have tested and verified most of the features we support, including:
- grouping
- sorting
- editing
- tooltips
- dragdrop (rows, columns, etc)
- popup editors
- key navigation
If you find a broken feature, please report it to our forum or GitHub and we will investigate it.
Lightning Web Components
Salesforce recommends to always choose Lightning Web Components unless you need an unsupported feature. We have prepared a public repository with a Lightning Web Application featuring all supported products. Please refer to this repo for sources and installation instructions:
Known issues
Custom bundle built from sources does not work
Sources contain some code which is not compatible with the Locker Service. If you are building your own bundle from the
sources and upload it to Salesforce with disabled LWS, you may see an error. That error is caused by import statement
used by getTestCase function. To solve this problem you need to configure your bundler to remove code wrapped by
tag-comments:
//<remove-on-lwc-release>
//</remove-on-lwc-release>
You can find more information in this forum post.
CSS collisions
You may encounter a CSS collision on components when loading static resources for different Bryntum products. Normally this should not be a problem because each product bundle exports the components it is based on. Scheduler exports Grid, Gantt exports both Scheduler and Grid. Which means you can use Grid from Gantt's static resource (please note you still need a license for every Bryntum product you use).
In case you have a static resource for the Grid (having grid.theme.css) and another for Scheduler (having scheduler.theme.css) you may see some incorrect styles, like the timeline header misplaced by a few pixels.
If you experience this or any other integration issue please let us know in our forums.
Changed and missing APIs
Lightning Locker modifies the behavior of some native APIs (and other native APIs are not supported). We have refactored our code base to allow overriding certain behavior specifically to work with Lightning Locker. As a result grid.lwc.module.js only works when Lightning Locker is enabled, it is not supposed to work in a regular page.
Overrides are organized in a single entry lib/Grid/override/salesforce/AllOverrides.js which you will only need if you want to generate a special bundle (e.g. to achieve minimum size). This entry should be imported first.
Supported Browsers
The LWC bundle we provide only supports modern browsers since Salesforce dropped support for legacy browsers at the end of 2020. IE11 and old (non-Chromium based) Edge are not supported.