Premium support for our pure JavaScript UI components


Post by rakshith.snps »

Hi Bryntum Team,
Thanks for your support.

We are using a Task edit dialog in the Gantt chart which loads on a double click on a task.
what we would like to achieve is to dispatch a custom event when the save button is clicked.
This is to notify our parent component that something as changed and then it will enable the Save button in the parent component.

We have implemented it like this

features: {
          taskEdit: {
            onSave: () => {
            // send a custom event to parent
              const eventEdited = new CustomEvent('eventedited');
              umGanttAdapter.dispatchEvent(eventEdited);
            },
            items: {
              // remove Advanced tab
              advancedTab: false,
              generalTab: {
                // Customize its contents
                items: {
                  fixed: {
                    type: 'check',
                    name: 'isFixed',
                    field: 'isFixed',
                    label: 'Fixed',
                    flex: '1 0 100%',
                    disabled: true,
                    weight: 800,
                  },
                  resultInputField: {
                    type: 'button',
                    cls: 'b-transparent',
                    name: '',
                    icon: 'b-fa-external-link-alt',
                    iconAlign: 'end',
                    text: this.label.resultInputLabel,
                    onClick: () => {
                      umGanttAdapter.openResultInput();
                    },
                    weight: 900,
                  },
                },
              },
            },
          },
        },

this seems to dispatch an event but the task edit dialog is not closing after the event is dispatched.

DEMO - Before the custom event was implemented

save-event.gif
save-event.gif (877.36 KiB) Viewed 185 times

DEMO - after the custom event was implemented.

save-event-on.gif
save-event-on.gif (894.07 KiB) Viewed 185 times

We would like to know why the task edit is not closing if we send a custom event from save event.
is there a better way to achieve what we are trying to do if so please let us know along with some resources

ENVIRONMENT DETAILS
https://energy-computing-2694-dev-ed.scratch.my.salesforce.com
rakshith18@synapse-i.jp
23BT6MA022


Post by alex.l »

That happened because you overrided internal onSave method that looks like this

    onSave() {
        // There's might be propagation requested, so we giving the chance to start propagating
        // before we're doing save commit procedure.
        this.requestAnimationFrame(() => this.save());
    }

We provide events that you can use to catch saving, as well as prevent it
https://bryntum.com/products/gantt/docs/api/Gantt/feature/TaskEdit#event-beforeTaskSave
https://bryntum.com/products/gantt/docs/api/Gantt/feature/TaskEdit#event-afterTaskSave

All the best,
Alex


Post Reply