rowExpander - selectionMode runtime changes have no effect.

[michal]

Hi,

steps to reproduce:

• open https://bryntum.com/products/grid/examples/basic/
• remove all code (leave import).
• paste:

const detailsGridConfig = {
    type          : 'grid',
    autoHeight    : true,
    selectionMode : {
        checkbox     : true,
        showCheckAll : true,
    },
    columns : [
        {
            text     : 'Product',
            field    : 'name',
        }
    ]
};

const g = new Grid({
    appendTo : 'container',
    features : {
        rowExpander : {
           widget    : detailsGridConfig,
           dataField : 'details',
        },
    },
    selectionMode : {
        checkbox: true,
        showCheckAll: true,
    },
    columns : [
        {
            text   : 'Name',
            field  : 'name',
            flex   : 2,
            

},
],
data : [
    { id : 1, name : 'Don A Taylor', age : 30, city : 'Moscow', food : 'Salad', color : 'Black', details : [
            { id : 122, name : 'Rice', icon : 'b-fa b-fa-bowl-rice', quantity : 2, price : 3.49 },
            { id : 124, name : 'Lemons', icon : 'b-fa b-fa-lemon', quantity : 1, price : 0.69 },
            { id : 121, name : 'Peppers', icon : 'b-fa b-fa-pepper-hot', quantity : 4, price : 2.99 },
            { id : 123, name : 'Cookies', icon : 'b-fa b-fa-cookie-bite', quantity : 3, price : 1.99 }
        ] },
]

});

g.selectionMode = {
        checkbox: false,
        showCheckAll: false,
}

g.features.rowExpander.widget.selectionMode = {
        checkbox: false,
        showCheckAll: false,
}

• observe the main row checkbox is NOT rendered (correct behaviour) - g.selectionMode properties were set to false in runtime
  • observe the rowExpander checkbox IS rendered (incorrect behaviour) - g.features.rowExpander.widget.selectionMode properties were set to false in runtime, but had not effect.

Thanks

[Animal]

g.features.rowExpander.widget is just a configuration object used when creating the real live widgets in the expanded rows.

Setting properties in that cannot have an effect. You need to set that property on all the real details grids that have been crated.

It is possible to have that yield a Proxy which would propagate property settings into the widgets. Here is a FR for that:https://github.com/bryntum/support/issues/11603

For now, you would have to grab them somehow like

containedGrids = grid.element.querySelectorAll('.b-grid').map(g => bryntum.fromElement(g));

[michal]

I dont think it's possible to grab them from the main grid, as they are Shadow DOM nodes?

[Animal]

I think it's not possible then.

[Animal]

You could try this method: https://bryntum.com/products/grid/docs/api/Grid/feature/RowExpander#function-getExpandedWidgets

[michal]

Sorry, this proves to be tricker than I thought.

The rowExpander configuration is set when the main grid is created. Each time the rowExpander expands, it generates a new instance based on that initial configuration. This means any changes you try to make at runtime (even to the shadow DOM) won't affect future rowExpanders.

My goal is to show/hide checkboxes of main grid and rowExpanded grids (currently expanded and any that could be expanded later).

Any workarounds or hints are welcome, please.

[Animal]

Of course changing the config object used to create the grids in the expansion will not change all the grids.

If you need to reconfigure them all, use https://bryntum.com/products/grid/docs/api/Grid/feature/RowExpander#function-getExpandedWidgets

Pseudo code just for guidance:

const { rowExpander } = grid.features;

grid.store.forEach(record => {
    rowWidgets = rowExpander.getExpandedWidgets(record);

    if (rowWidgets) {
        rowWidgets.normal.setConfig({
            ...
        });
    }
});

[alex.l]

Hi,

We need to improve it in https://github.com/bryntum/support/issues/11603 feature request to make it working.

Workarounds might be:

1. Declare beforeShow listener for detail grid, and manage it state in there.
2. use rowExpand event (https://bryntum.com/products/schedulerpro/docs/api/Grid/feature/RowExpander#events) , get instance using https://bryntum.com/products/grid/docs/api/Grid/feature/RowExpander#function-getExpandedWidgets and manage it state in there

[michal]

Since I needed to control the visibility of the checkboxes of the main grid and rowExpanded grid using an external (to bryntum) toggle switch, it proved to be problematic to keep up with the initial state and the dynamic state in two places (main grid and rowExpanded grid).

I now simply destroy and re-init the grid with the most up-to-date state of the switch.

[alex.l]

Thanks for an update, michal! Sounds like a good workaround.