Editor Window with custom save button to access the data

[Dimitris]

Hi,

I would like to add a custom button to the scheduler's editor window, which will save the event data (as if I have had the build-in Save button clicked) and redirect to another web page based on the data values of the event.

This is what I have so far:

function onPopupOpen(args) {
    if (args.type === 'Editor') {
        var dialogObj = args.element.ej2_instances[0];
        let buttons = dialogObj.buttons;
        buttons.push({
            buttonModel: {
                content: "Save & Go",
                isPrimary: false,
                cssClass: "e-custom-btn1"
            },
            click: goTo.bind(args)
        });
        dialogObj.setProperties({
            buttons: buttons
        });
    }
}

The question is what code to write inside the goTo function, to save the event data and access those data. Something like:

function goTo() {
    // get updated event data from the editor window
    // save event data, e.g. saveEvent(data)
    // if (data.Subject === 'xyz')
    //     window.location.rel='nofollow' href = '/xyz/create' + data.Id;
}

I have tried this.data to access the data but it only contains the data with which the editor was opened. The user most likely updates the data before the button is clicked.

How can I invoke/simulate the click of the build-in Save button and access the updated event data?

Thanks,

[Ruksar Moosa Sait]

Hi Dimitris,

We have checked on your query and suggest you to use actionBegin method to redirect to a new page and save the data in the goTo method like the below.

Modified code:

<script type="text/javascript">

        function onActionBegin(args) {

            if(args.requestType === 'eventCreate' && args.data[0].Subject === 'xyz'){

                window.location.rel='nofollow' href = '/xyz/create' + args.data[0].Id;

            }

        }

        function onPopupOpen(args) {

        if (args.type === 'Editor') {

            var dialogObj = args.element.ej2_instances[0];

            let buttons = dialogObj.buttons;

            let buttonElement = document.querySelector('.e-custom-btn1');

            if(!buttonElement){

                buttons.push({

                buttonModel: {

                    content: "Save & Go",

                    isPrimary: false,

                    cssClass: "e-custom-btn1"

                },

                click: goTo.bind(args)

            });

            }

            dialogObj.setProperties({

                buttons: buttons

            });

        }

    }

    function goTo(args) {

         document.querySelector('.e-schedule-dialog .e-event-save').click();

    }

</script>

Kindly try the attached sample and let us know if you need further assistance.

Regards,

Ruksar Moosa Sait

Attachment: Asp.netCoreEditorCustomization_3b232a8.zip

[Dimitris]

Hello,

Sorry for the late response. I have implemented as per your suggestion and it works fine.

Thank you very much for your support,

[Satheesh Kumar Balasubramanian]

Hi Dimitris,

Thanks for the update.

We are happy that your problem has been resolved now.

Regards,

Satheesh Kumar B