[REACT] Gantt cell should remain in edit mode when interacting with dialog/callout
Posted: Thu Jun 08, 2023 11:47 am
Hi,
We are incorporating our own editing control into Gantt with the approach suggested here: viewtopic.php?p=124737#p124737
Our calendar control opens a dialog which is mounted in the root of the document (i.e. outside the cell being edited) - just like the Bryntum calendar widget. When we interact with our calendar dialog, the cell exit editing mode and returns to view mode while the calendar dialog remains open.
We need to be able to control when the cell exits editing mode - how do we achieve that ?
-- Thanks
export default class CustomFieldEditor extends React.Component<IFControlGenericProps> {
private domRef = React.createRef<HTMLDivElement>();
private controlApi: IFControlGenericControlInterface | null = null;
state = {
value: undefined
};
render() {
const options = { ...this.props.options };
options.Width = { Value: 100, UnitType: "%", IsDefaultValue: false };
return <div style={{ padding: "0.6em", color: "black", width: "100%" }} ref={this.domRef}>
<FControlGeneric {...this.props} options={options} focused={true} activate={true} cacheKey={DataUtil.CreateGuid()} value={this.state.value} onCreate={(api) => { this.controlApi = api; }} valueChanged={(value) => {
this.setState({ value: value });
}} />
</div>
}
public override componentDidMount(): void {
// Disable cell's overflow:hidden
this.domRef.current && this.domRef.current.parentElement && (this.domRef.current.parentElement.style.overflow = "visible");
this.domRef.current && this.domRef.current.parentElement && this.domRef.current.parentElement.parentElement && (this.domRef.current.parentElement.parentElement.style.overflow = "visible");
}
// Bryntum cell editing interface - required functions:
getValue() {
return this.state.value;
}
setValue(value: string | FControlValue | undefined, cellEditorContext?: any) {
this.setState({ value: value });
}
isValid() {
return this.controlApi?.IsValid() || false;
}
focus() {
this.controlApi?.Focused(true);
this.controlApi?.Activate();
}
}