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.