Premium support for our pure JavaScript UI components


Post by JussiSa »

Hi,

I'll stack couple of things in a single post so I don't need to follow multiple posts.

1. FinalizeCellEdit
When a column has finalizeCellEdit and it returns a promise, it will launch multiple times when clicked outside of the grid if promise is not resolved. Is this how it's supposed to work? We launch an own dialog window in the function and only after closing the dialog we resolve the promise. The way I described it working launches now multiple dialogs when clicking inside the dialog - outside the grid.

This can be reproduced in Grid Basic Demo with the following code:

import { Grid, DataGenerator } from '../../build/grid.module.js?463787';
import shared from '../_shared/shared.module.js?463787';

new Grid({
    appendTo : 'container',
    features : {
        group : false
    },
    columns : [
        {
            text   : 'Name',
            field  : 'name',
            flex   : 2,
            editor : {
                type     : 'textfield',
                required : true
            },
            finalizeCellEdit: async () => {
                return new Promise(resolve => {
                    console.log('finalize');
                });
            }
        }, {
            text  : 'Age',
            field : 'age',
            width : 100,
            type  : 'number'
        }, {
            text  : 'City',
            field : 'city',
            flex  : 1
        }, {
            text  : 'Food',
            field : 'food',
            flex  : 1
        }, {
            text     : 'Color (not sortable)',
            field    : 'color',
            flex     : 1,
            sortable : false,
            renderer({ cellElement, value }) {
                cellElement.style.color = value;
                return value;
            }
        }
    ],
    data : DataGenerator.generateData(50)
});

In the demo, double click the name column to make it editable. Edit some value in it and then click to the blue header or somewhere outside the grid component. Watch the browser console to see the log logging multiple times on each click.

2. Mask
When grid is masked while a cell is in edit mode, you can still edit the cell data. We expect mask to make grid uneditable. After all, it masks the whole grid so it can't be clicked but how about when mask starts in edit mode itself? This creates issues because we use masking while we do operations in backend and editing can launch overlapping operations.

This can be reproduced in Grid Basic Demo with the following code:

import { Grid, DataGenerator } from '../../build/grid.module.js?463787';
import shared from '../_shared/shared.module.js?463787';

const grid = new Grid({
    appendTo : 'container',
    features : {
        group : false
    },
    columns : [
        {
            text   : 'Name',
            field  : 'name',
            flex   : 2,
            editor : {
                type     : 'textfield',
                required : true
            }
        }, {
            text  : 'Age',
            field : 'age',
            width : 100,
            type  : 'number'
        }, {
            text  : 'City',
            field : 'city',
            flex  : 1
        }, {
            text  : 'Food',
            field : 'food',
            flex  : 1
        }, {
            text     : 'Color (not sortable)',
            field    : 'color',
            flex     : 1,
            sortable : false,
            renderer({ cellElement, value }) {
                cellElement.style.color = value;
                return value;
            }
        }
    ],
    listeners: {
        beforeCellEditStart: () => {
            setTimeout(() => {
                grid.mask('Loading');
            }, 2000);
        },
    },
    data : DataGenerator.generateData(50)
});

Start editing the first column. Wait two seconds and after the mask apprears, continue editing.


Post by tasnim »

Hello,

  1. It's a bug, I've created a ticket for that. Here it is https://github.com/bryntum/support/issues/5700

  2. It's not a bug, During the editing, the mask is displayed. If you want the editing to stop, then you could call https://bryntum.com/products/grid/docs/api/Grid/feature/CellEdit#function-cancelEditing


Post by JussiSa »

Thanks for your reply.

A follow up question about 2nd one:

Is it intended behaviour that even while finalizCellEdit -promise remains unresolved the editor stays active and lets the user make changes to the input? We'd think that changing the input value should be prohibited while we are processing the previous value change.

This is also reproducable with the code snippet given to issue 1. about the finalizeCellEdit.

  1. Edit some row in the Name -column
  2. Press tab/enter finalizing the edit
  3. Continue to make more edits to the input value

Post by alex.l »

I think we need to handle that as well. I've opened a ticket for this case https://github.com/bryntum/support/issues/5775
Thank you for your question!

All the best,
Alex


Post Reply