Our blazing fast Grid component built with pure JavaScript


Post by guillermoxintel »

Hello. I'm having a little problem with a widget column and a renderer. Here's a piece of my code:

{
                    width: 48,
                    type: 'widget',
                    align: 'center',
                    widgets: [{
                        type: 'button',
                        icon: 'fa fa-sign-out',
                        cls: 'b-blue',
                        tooltip: 'Add Model Positions to Group',
                        disabled: false,
                        hidden: false,
                        onAction: async (event) => {
                            var record = event.source.cellInfo.record;
                            //do something...
                        }
                    }],
                    renderer({ cellElement, column, dataField, grid, isMeasuring, record, row, rowElement, size, updatingSingleRow, value, widgets }) {

                    if (record.isTemplate) {
                        widgets[0].hidden = true;
                    } else if (record.isFinalized) {
                        widgets[0].disabled = true;
                    }
                    
                },
            },

It's basically a widget column with a button and a renderer. When the record is template, the widget should hide, when the record is finalized, it should show but disabled, and the third option is just show the button. When it load the grid it works as expected, please check the following screenshot:
Image
As soon as I call the grid.store.sort() or click the top of a column to sort by X, all my buttons are gone or out of place, like this:
Image
(I added the questions marks), so I did click the Type/Group column and it did sort the records but all my buttons are gone.

PD. I had seen this weird behavior on cells before, when contracting tree, when renderer does not have a return value, it display the value of cells in other cells or rows... we did fixed the issue by using "return '';" but this did not work here and we are out of ideas...

I did check the docs (https://bryntum.com/docs/grid/api/Grid/column/WidgetColumn#config-renderer) and we don't see we are doing anything wrong...


Post by guillermoxintel »

I modified my code a little and it works, but not sure why do I have to do this

renderer({ cellElement, column, dataField, grid, isMeasuring, record, row, rowElement, size, updatingSingleRow, value, widgets }) {

                    widgets[0].disabled = false;
                    widgets[0].hidden = false;

                    if (record.isFinalized) widgets[0].disabled = true;
                    if (record.isTemplate) {
                        widgets[0].hidden = true;
                        return;
                    }

                },

Post by alex.l »

Hi guillermoxintel,

When we do sort or filtering or whatever else that affects on data, we do not re-create all html objects on the page, but re-use them if that's possible. This helps a lot with performance and makes our components fastest in the class by many params.
We are able to take care of our internal processes, but cannot do that for custom user code.
In custom renderer code I see that disable and hidden flags are changed for one side and never switched back, I think you already found that.
That's the only thing we need to know about here - widgets may be re-used for another data.

Try this

renderer({ cellElement, column, dataField, grid, isMeasuring, record, row, rowElement, size, updatingSingleRow, value, widgets }) {
                    widgets[0].disabled = record.isFinalized;
                    widgets[0].hidden = record.isTemplate;
                    return;
                },

All the best,
Alex


Post Reply