Our blazing fast Grid component built with pure JavaScript


Post by conn.finn »

Hello, I have an improvement request for the Grid; the details are as follows:

Description:
Rerendering on record change can cause user events to be "lost" in some specific cases. Manually calling a render function expander would give more control and allow for handling these cases. It would be ideal if the render function could optionally accept a DOM object, similar to other Bryntum components, for most flexibility.


Example:
A row has several number cells, a total cell, and is expanded. The expander has a couple buttons (save and cancel). The save button is enabled/disabled based on the total.

When one of the cells is updated, beforeFinishCellEdit is called and the total is set via

record.set({ total: sumOfValues() })

.

If the user types in a number and while the input is still focused they press save, the record.set is fired on input blur (beforeFinishCellEdit) and updates the record. This rerenders the expander and the user's click event is "lost". Likely because the render begins and destroys the element, the click fires on the location where the destroyed element was, then the expander is rendered. They then must press the save button a second time.

If the render function was available, we could programmatically call it when needed.


Post by tasnim »

Hi,

Thanks for reaching out, I've opened a feature request for that here https://github.com/bryntum/support/issues/10167

I believe there could be another approach of adding the click listener. Could you please share the renderer code of rowExpander and how you add the click listener? I might be able to help after seeing the code.


Post by conn.finn »

Our code for rendering and saving the cells is pretty similar to the example:

https://www.bryntum.com/products/grid/examples/rowexpander-spanregions/

You'll see the same issue there. If you edit one of the age cells and type in a different number and while the input still has focus you press save or cancel on the expander, the input loses focus, but the button onClick isn't fired.

If you then change the example code to have refreshOnRecordChange : false, and perform the same steps, it will fire correctly.


Post by marcio »

Hey,

Thanks for sharing the example and how to reproduce.

That looks like a bug, so I created a ticket to fix that https://github.com/bryntum/support/issues/10173.

Best regards,
Márcio


Post by joakim.l »

Hey

Have some updates regarding this.

A possible solution is to replace the click listener with pointerup, and possibly add a pointerdown to know for sure that the button has been clicked. These events will get triggered correctly. This would work fine for our rowexpander-spanregions demo, but may become not so nice when the expanded area has more complex functionality.

The ticket marcio created will include a more proper fix that allows for click events to trigger before the content gets re-rendered.

Also, I have a question about the feature request.
You write:

It would be ideal if the render function could optionally accept a DOM object, similar to other Bryntum components, for most flexibility

Returning a DOM config object from the RowExpander renderer is supported right now.

Or do you mean that if you can refresh the expander programmatically, the refresh function should accept DOM render data? If so, I don't believe that will be implemented. The "refresh" function will probably just remove the currently rendered expander content and trigger a grid re-render which will call the configured renderer function to get data (or re-create any widgets configured).

Regards
Joakim


Post Reply