[INFO REQ] Hide Widget/Button or ActionColumn based on record/field value

[dmnewnham]

Hi,

I have a field name "link" that is going to be set to 1 or 0 (I could change it to a text field and the content could be true or false). I want either a widget/button or an actioncolumn that ONLY displays if the field value for that record is = 1 or is true. So, a clickable button that only appears if the record field value is true or = 1. How could I use an actioncolumn or widget to achieve this? I'm very new to this so I have no idea of the syntax. Thanks!

[pmiklashevich]

Hello,

https://www.bryntum.com/docs/grid/#Grid/column/ActionColumn supports "visible" function. Please see this part of the example in the docs:

        actions : [{
            cls      : 'b-fa b-fa-plus',
            renderer : ({ action, record }) => `<i class="b-action-item ${action.cls} b-${record.enabled ? "green" : "red"}-class"></i>`,
            visible  : ({ record }) => record.canAdd,

Return true from the "visible" function to show the action.
So in your case it can be

visible  : ({ record }) => record.link,

https://www.bryntum.com/docs/grid/#Grid/column/WidgetColumn is a bit tricky, but it's also possible to achieve this. You need to specify https://www.bryntum.com/docs/grid/#Core/widget/Widget#config-defaultBindProperty equal to "hidden", so when the value field is applied, it sets to the https://www.bryntum.com/docs/grid/#Core/widget/Widget#property-hidden. And set the column field to the boolean flag. For example:

        {
            text    : 'Widget',
            field   : 'done', // boolean data field
            width   : 100,
            type    : 'widget',
            widgets : [{
                defaultBindProperty : 'hidden', // so "done" field is set to the "hidden" property of the widget
                type     : 'button',
                tooltip  : 'Add',
                icon     : 'b-fa b-fa-plus',
                cls      : 'b-blue b-raised',
                onAction : ({ source : btn }) => {
                    ...
                }
            }]
        },

Cheers,
Pavel

[dmnewnham]

Perfect. I realised also that I was parsing JSON string data as "false" and had to convert to proper boolean to make this work. Great support. Thanks.