Premium support for our pure JavaScript UI components


Post by jit@flowit.dk »

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();
}
}

Best regards
Jimmy Thomsen


Post by mats »

We need to be able to control when the cell exits editing mode - how do we achieve that ?

Sounds like you can try setting https://bryntum.com/products/grid/docs/api/Core/widget/Editor#config-blurAction to null on the column editor config, does that solve it?


Post by jit@flowit.dk »

Hi,

Could you please elaborate on that? Where do I set the blurAction property exactly? And how do I exit editing mode from my editor ?
We are building our custom column editors as suggested here: viewtopic.php?p=124737#p124737
I have also attached a runnable example.

-- Thanks

Attachments
Bryntum-2023-06-08-015.zip
(2.27 MiB) Downloaded 19 times

Best regards
Jimmy Thomsen


Post by fabio.mazza »

Hello,

maybe when calendar widget is opened, beforeCancel is triggered, then you can listen for it
https://bryntum.com/products/grid/docs/api/Core/widget/Editor#event-beforeCancel

...
                    {
                        field: "Prop_e01d93cc-fc6b-47d6-b9cf-8fb51f168354",
                        text: "Custom editor",
                        width: 250,
                        renderer: (args) => {
                            return args.value;
                        },
                        cellEditor : {
                            listeners : {
                                beforeCancel : (e) => {
                                    console.log(e);
                                }
                            }
                        },
                        editor: ref => <CustomEditor ref={ref} />
                    }
                    ....
                    

Let us know if it works for you

Best regards,
Fabio


Post Reply