Premium support for our pure JavaScript UI components


Post by H9FFDC »

Hi,

When using the auto state handling feature to persist grid state into local storage, we are finding that this is breaking the Column Reordering functionality. I have been able to reproduce this using the Salesforce example code, modified slightly to enable storing the state (see attachment)

Replication steps:

Whilst investigating the issue, we have found that removing the subGrids property from the saved state works around the issue. However this of course means that we're not able to persist the subGrids state so is not ideal. It seems that when the state is initially applied, applying the subGrid state causes DragHelperOverride.getMouseMoveListenerTarget() to be called earlier than it would be otherwise, and it is returning the incorrect target.

Thanks!

Attachments
Screenshot 2023-06-08 at 09.50.09.png
Screenshot 2023-06-08 at 09.50.09.png (50.55 KiB) Viewed 398 times

Post by alex.l »

Hi, please share columns config as well

All the best,
Alex


Post by H9FFDC »

Hi Alex, the code is taken from the examples/salesforce folder, the only thing I've changed is adding the stateId and stateProvider as shown above. Thanks.


Post by alex.l »

Hi, unfortunately I don't see this problem in our latest code base.
But. In case you just used our code with no changes, state for columns won't be working as expected. To have columns stable restored with stateProvider, you need to add static ids for columns.

export const columns = [
    { type: 'rownumber' },
    {
        id : 'template-column', // static id should be used
        text: 'Template',
        field: 'name',
        flex: 1,
        type: 'template',
        template: (data) => `Hi ${data.record.data.name}!`,
    },

Another thing is that StateProvider init should be like this

    createGrid() {
        bryntum.grid.StateProvider.setup('local');

    window.grid = new bryntum.grid.Grid({
        stateId : 'stateId',
        features: {
            rowReorder: true,

Docs https://bryntum.com/products/grid/docs/api/Core/state/StateProvider
Demo https://bryntum.com/products/grid/examples/state/

All the best,
Alex


Post by H9FFDC »

Hi Alex, thanks again for your reply.

I have amended my code as per your example (added column ids and changed the StateProvider init), and am still hitting the same issue. Column Reordering works fine when the grid loads without any prior persisted state, but then on subsequent loads where it applies state from storage, the reordering no longer works.

In the standard state demo everything works fine, I am only seeing the issue when using the grid in LWC.

I have uploaded the amended LWC example code here - https://drive.google.com/file/d/1EE3cQ45bNm8Mratd-b12KynZ1qYTmdlg/view?usp=drive_link


Post by alex.l »

Hi,

I used example provided and it just work to me as it is without any changes.
Please check console, if any errors logged. Let us know if you changed any default settings for your SalesForce workspace, especially security settings. Make sure you used latest released version. Let us know browser and OS versions you used. I guess any information might be relevant here.

All the best,
Alex


Post by H9FFDC »

Hi Alex. Thanks again for looking into this.

Grid Version: 5.3.6 with build/grid.lwc.module.js deployed as a static resource
OS: macOS Ventura 13.4
Browser: Chrome 114.0.5735.106, although I am also able to replicate in Firefox
Salesforce org: standard scratch org created from sfdx project as described in examples/salesforce/src/lwc/README.md. The component has been added to a Lightning App Page. I am able to replicate with Lightning Web Security enabled and disabled.


Post by Maxim Gorkovsky »

Reproduced, ticket opened here: https://github.com/bryntum/support/issues/6998 Thank you for a detailed report!


Post Reply