Two widget columns with same widget type acts wrong on column hide/show

[taauntik]

Forum Post

We ran into a weird issue with a grid we created. We have two widget columns in our grid. Both with button widgets. The grid loads correctly the first time, but as soon as you hide or show a column, the buttons in the second widget column use the same class as the first widget column and also the onAction from the buttons in the first widget column fires if button in the second widget column are clicked. I tried making this change in your example, and I was able to replicate the issue. Let me know if I should attached a video to demo the problem.

Reproduced with this demo https://bryntum.com/products/grid/examples/widgetcolumn/

import { Model, Grid, DataGenerator } from '../../build/grid.module.js?474079';
import shared from '../_shared/shared.module.js?474079';

// Define a model class representing the data shown in the grid
class Person extends Model {
    static get fields() {
        return [
            'name',
            'age',
            'verified',
            'approved',
            'reviewed'
        ];
    }
}

new Grid({
    appendTo  : 'container',
    rowHeight : 60,
    columns   : [
        {
            // Basic column showing the name
            text  : 'Name',
            field : 'name',
            flex  : '0 0 10em'
        },
        {
            // Number column showing the age
            text  : 'Age',
            field : 'age'
        },
        {
            text    : 'Buttons',
            align   : 'center',
            width   : 120,
            type    : 'widget',
            // An array of Button widgets
            widgets : [
                {
                    type     : 'button',
                    icon     : 'b-fa b-fa-minus',
                    cls      : 'b-blue b-raised',
                    onAction : ({ source: btn }) => {
                        btn.cellInfo.record.age--;
                    }
                },
                {
                    type     : 'button',
                    icon     : 'b-fa b-fa-plus',
                    cls      : 'b-blue b-raised',
                    onAction : ({ source: btn }) => {
                        // Every widget is decorated with a `cellInfo` object with the `record` and `column` instances
                        btn.cellInfo.record.age++;
                    }
                }
            ]
        },
{
            text    : 'Buttons',
            align   : 'center',
            width   : 120,
            type    : 'widget',
            // An array of Button widgets
            widgets : [
                {
                    type     : 'button',
                   icon     : 'b-fa b-fa-minus',

            },
            {
                type     : 'button',
                icon     : 'b-fa b-fa-plus',

            }
        ]
    },
    {
        text    : 'Field bound to name',
        type    : 'widget',
        width   : 200,
        widgets : [
            // A simple text field widget mapped to the `name` field
            {
                type : 'textfield',
                name : 'name'
            }
        ]
    },
    {
        text    : 'Slider bound to age',
        type    : 'widget',
        width   : 250,
        cls     : 'slidercell',
        widgets : [
            {
                type                 : 'slider',
                name                 : 'age',
                triggerChangeOnInput : true,
                showValue            : false,
                showTooltip          : true
            }
        ]
    },
    {
        text     : 'Checkboxes',
        type     : 'widget',
        align    : 'center',
        width    : 200,
        renderer : ({ widgets }) => {
            // We have access to the widgets inside the cell renderer method, so you can hide / show widgets or
            // mutate their value or state
        },
        widgets : [
            // Toggling these checkboxes will redraw the row and trigger an update of the progress bar column
            {
                type    : 'checkbox',
                tooltip : 'Reviewed',
                name    : 'reviewed'
            },
            {
                type    : 'checkbox',
                tooltip : 'Verified',
                name    : 'verified'
            },
            {
                type    : 'checkbox',
                tooltip : 'Approved',
                name    : 'approved'
            }
        ]
    },
    {
        text     : 'Progress',
        cellCls  : 'progresscell',
        editor   : false,
        renderer : ({ record }) => {
            return {
                class : 'progressbar',
                style : `height:${(Number(record.reviewed) + Number(record.verified) + Number(record.approved)) * 100 / 3}%`
            };
        }
    }
],

store : {
    // Configure the data store with the person model
    modelClass : Person,
    data       : DataGenerator.generateData(50).map(rowData => {
        rowData.reviewed = Math.random() > 0.5;
        rowData.verified = Math.random() > 0.5;
        rowData.approved = Math.random() > 0.5;
        return rowData;
    })
}
});

[ExtAnimal]

Dupe of https://github.com/bryntum/support/issues/8388

[ExtAnimal]

Not a dupe.