Hi,
I used this topic as a base viewtopic.php?p=126626 for using a react component as a column editor but faced with many issues where editing mode closes all the time.
Here's the editor component code (the full example is in the attachments):
import React from 'react';
// Defines a simple React cell editor that displays two buttons Yes|No, for editing boolean columns
export default class DemoEditor extends React.Component {
state = {
value : []
};
//region Cell editing interface, required functions
// Should return the value to be applied when editing finishes
getValue() {
console.log('get value', this.state.value);
return this.state.value;
}
// React setState is asynchronous so we return Promise which is resolved when setState finishes
setValue(value) {
console.log('set value', value);
return new Promise(resolve => this.setState({ value }, () => resolve(value)));
}
// Invalid editors are note allowed to close (unless grid is so configured). Implement this function to handle
// validation of your editor
isValid() {
// This simple editor is always valid
return true;
}
// Called when editing starts, to set focus at the desired place in your editor
focus() {}
//endregion
render() {
return (
<div
style={{
backgroundColor: "white",
color: "black",
width: "100%",
display: "flex",
}}
>
{(this.state.value || []).map(({ id, name, level }) => (
<div key={id}>
{name}{level ? `, ${level.name}` : ""}
<button
onClick={() =>
this.setValue(
// Case #1
this.state.value.filter((item) => item.id !== id)
// Case #2
// this.state.value.slice(0, this.state.value.length - 1)
)
}
>
X
</button>
</div>
))}
</div>
);
}
}
and task data
{
"id" : 12,
"name" : "Configure firewall",
"percentDone" : 50,
"startDate" : "2019-01-14",
"rollup" : true,
"duration" : 3,
"endDate" : "2019-01-17",
"skills": [
{
"id": "s1",
"name": "Java",
"level": {
"id": "sl3",
"name": "Senior"
}
},
{
"id": "s2",
"name": "JavaScript",
"level": {
"id": "sl1",
"name": "Junior"
}
},
{
"id": "s3",
"name": "SQL",
"level": null
}
]
}
Case 1
By clicking on any delete button while editing the skills cell, the last skill gets removed (it's the only case I found where it doesn't automatically close all the time). If you click on any button except for the last one then editing mode keeps being active. But when you click on the last button editing mode stops and the editor closes. Check attached video #1.Case 2
By clicking on any delete button while editing the skills cell, the skill that that button was rendered for gets removed. The editing mode should still be active but it always stops and closes the editor. Check attached video #2.
The actual component is more complicated (there's a dropdown to select skills and levels) but at least there I know that dropdown is open and I just return false on "beforeCancelCellEdit" and "beforeFinishCellEdit" events so it's not closing automatically before dropdown is closed. But we need to be able to remove items without opening the dropdown.
Could you please give any suggestions on what is wrong with the code or what I need to do additionally to stop it from autoclosing?
