Our blazing fast Grid component built with pure JavaScript


Post by sipi41 »

Hello and thank you for your kind help. I do have the following simple grid:

Image

I want people to click the checkbox BUT before that, I want a dialog to appear saying: "are you sure? " (or another msg), if they do not confirm then nothing happens, I hope make sense what I said.

So for all other columns, I'm using "finalizeCellEdit" and it works as expected, now on the checkbox column, I tried to use it and simply does nothing, even if finalizeCellEdit is listed as a valid property, so I decided to take another approach using beforeToggle event, and it works only if it runs synchronously and I need this to be async, as I have to wait for the answer of the user, here's a sample of my code:

Image

Any help on this situation will be appreciated. Thank you.


Post by mats »

For now you would need to return false from beforeToggle, save a reference to the record / checkbox and show your popup and then set the checked value based on the user input.


Post by sipi41 »

ok, let me see if I understood... so I should always return false, that's the easy part, then... create another function and send a reference of the record? then update accordingly? would you please provide an example? thanks for your help.

May I ask why finalizeBeforeEdit is not working???


Post by sipi41 »

Ok... any example on how to do this? how do I put a confirmation before accepting checkbox new value? thanks for all your help.


Post by mats »

Try:

 {
                type      : 'check',
                field     : 'done',
                flex      : 2,
                listeners : {
                    beforeToggle({ checked, record }) {
                        const result = MessageDialog.confirm({
                            title   : 'Please confirm',
                            message : 'Did you want this?'
                        }).then(result => {
                            if (result === MessageDialog.okButton) {
                                record.done = checked;
                            }
                        });
                        return false;
                    }
                }
            },

Post by sipi41 »

Mr Mats, thank you for the great sample and your patience, we still have more question but this one is resolved I think.

PD. for other people, record.done does not exist, that is RECORD.YOURFIELD = true in this case, so you are not looking for this DONE option.


Post by sprabhu »

Hi Mats,
The above code is not working when I try to implement on the advanced example provided by Bryntum.
Please refer to the recoding using the link : https://frontrol-my.sharepoint.com/:v:/p/cgupta/EYdzTia8qjRFtrcn7EepWRQBCJfu16Q29pD_ahzjTjOf0g?e=TDlgbj

{
                type      : 'check',
                field     : 'done',
                flex      : 2,
                listeners : {
                    beforeToggle({ checked, record }) {
                        const result = MessageDialog.confirm({
                            title   : 'Please confirm',
                            message : 'Did you want this?'
                        }).then(result => {
                            if (result === MessageDialog.okButton) {
                                record.done = checked;
                            }
                        });
                        return false;
                    }
                }
            },

Post by tasnim »

Hi,

You need to import the MessageDialog

Screenshot 2023-05-31 162751.png
Screenshot 2023-05-31 162751.png (46.81 KiB) Viewed 352 times

Then, it will be working as expected


Post by sprabhu »

its working :-)


Post Reply