bryntum / support

An issues-only repository for the Bryntum project management component suite which includes powerful Grid, Scheduler, Calendar, Kanban Task Board and Gantt chart components all built in pure JS / CSS / TypeScript
https://www.bryntum.com
54 stars 6 forks source link

Radio widget not preserving value after filtering #10144

Open marciogurka opened 2 weeks ago

marciogurka commented 2 weeks ago

Forum post

Checking the demo shared here (based on https://bryntum.com/products/grid/examples/widgetcolumn/), when using a radio widget then filtering the rows and clearing it back, the value of the radio isn't preserved (check the video).


const bryntumGrid = new Grid({

appendTo : 'container',

features : {

    stripe: false,
    filterBar: {
        compactMode: true
    },
    quickFind: true,
},

// Headers will ripple on tap in Material theme
ripple : {
    delegate : '.b-grid-header'
},

columns : [
    {
        text   : 'Name',
        field  : 'name',
        flex   : 2,
        editor : {
            type     : 'textfield',
            required : true
        }
    },
    {
            text            : 'Checkboxes',
            type            : 'widget',
            align           : 'center',
            width           : 200,
            afterRenderCell : ({ widgets }) => {
                // We have access to the widgets inside the cell afterRenderCell 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    : 'radio',
                    tooltip : 'Reviewed',
                    name    : 'reviewed'
                },
                {
                    type    : 'checkbox',
                    tooltip : 'Verified',
                    name    : 'verified'
                },
            ]
        },

],

data : [
    { id : 1, name : 'Don A Taylor', Opt1 : 0, Opt2 : 1, Opt3 : 0},
    { id : 2, name : 'John B Adams', Opt1 : 0, Opt2 : 0, Opt3 : 0 },
    { id : 3, name : 'John Doe', Opt1 : 0, Opt2 : 0, Opt3 : 1 },
    { id : 4, name : 'Maria Garcia', Opt1 : 0, Opt2 : 1, Opt3 : 0 },
    { id : 5, name : 'Li Wei', Opt1 : 0, Opt2 : 0, Opt3 : 0 },

]
,
  tbar : [

{
    type        : 'button',
    type     : 'button',
    ref      : 'addButton',
    text     : 'Update',
    onAction : () => {

    }
},
]

});

https://github.com/user-attachments/assets/35a08ecb-6e44-4e6b-aa5d-f955b386ba75

ExtAnimal commented 2 weeks ago

There are bugs in Checkbox. Fixes are in the Codepen attached to the thread.

But the poster does not actually link the record to the widget in any way. The Codepen illustrates a technique.