We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Add Progress-button to scheduler header

Hi.

I put progress-button in the schedule header as shown below.

However, when the view is loaded, continues to spin as shown.

Regards


<ejs-schedule id="schedule" currentView="Month" height="640px" width="100%" allowDragAndDrop="false" allowResizing="false" readonly="true" rowAutoHeight="false"
                                      actionBegin="ScheduleActionBegin" actionComplete="ScheduleActionComplete" popupOpen="PopOpen">
                            <e-schedule-timescale enable="false"></e-schedule-timescale>
                            <e-schedule-views>
                                <e-schedule-view option="Month" eventTemplate="#MonthEventTemplate"></e-schedule-view>
                                <e-schedule-view option="Week"></e-schedule-view>
                            </e-schedule-views>
                            <e-schedule-quickinfotemplates content="#content-template">
                            </e-schedule-quickinfotemplates>
                            <e-schedule-resources>
                                <e-schedule-resource field="ProjectId" title="Choose Project" dataSource="@ViewBag.Projects" allowMultiple="true"
                                                     name="Projects" idField="ProjectId" colorField="Color">
                                </e-schedule-resource>
                            </e-schedule-resources>
                            <e-schedule-eventsettings>
                                <e-eventsettings-fields id="ID">
                                    <e-field-subject name="SUBJECT"></e-field-subject>
                                    <e-field-description name="DESCRIPTION"></e-field-description>
                                    <e-field-starttime name="STARTTIME"></e-field-starttime>
                                    <e-field-endtime name="ENDTIME"></e-field-endtime>
                                    <e-field-isallday name="ISALLDAY"></e-field-isallday>
                                </e-eventsettings-fields>
                            </e-schedule-eventsettings>
                        </ejs-schedule>


function ScheduleActionBegin(args) {
            if (args.requestType === 'toolbarItemRendering') {
                args.items[3].align = 'Left'
                args.items[4].align = 'Left'
                args.items[5].align = 'Left'
                args.items[6].align = 'Left'


                var UserDropdown = { template: '<input type="text" id="UserDropdown" />', type: 'Input', align: 'Right' }
                args.items.push(UserDropdown);


                var edwpBtn = { template: '<input type="button" id="EDWPBtn" value= "Receive EDWP Data" >', type: 'Button', align: 'Right' }
                args.items.push(edwpBtn);
            }
        }




        function ScheduleActionComplete(args) {
            if (args.requestType === 'toolBarItemRendered') {
                var scheduler = document.getElementById('schedule');
                let UserData = [
                    { User: "ALL" },
                    { User: sEmail }
                ];


                var listObj = new ej.dropdowns.DropDownList({
                    dataSource: UserData,
                    fields: { value: 'User' },
                    value: sEmail,
                    change: () => { UserChange(); },
                    width: 180,
                });


                listObj.appendTo('#UserDropdown');


                var btnObj = new ej.splitbuttons.ProgressButton({
                    height: 32,
                    //onclick: () => { onclick(); },
                });
                btnObj.appendTo('#EDWPBtn');


            }

3 Replies

RV Ravikumar Venkatesan Syncfusion Team February 24, 2023 12:19 PM UTC

Hi TaeWook,


You can resolve your reported behavior by calling the hideSpinner method of the Schedule in the created event of the Schedule as shown in the below code snippet.


[Index.cshtml]

<ejs-schedule id="schedule" currentView="Month" height="640px" width="100%" created="OnCreate">

</ejs-schedule>

 

<script type="text/javascript">

    function OnCreate() {

        var scheduleEle = document.querySelector(".e-schedule");

        if (scheduleEle) {

            scheduleEle.ej2_instances[0].hideSpinner();

        }

    }

</script>


Regards,

Ravikumar Venkatesan


Attachment: ej2_core_schedule_hide_spinner_sample_7c4a78f1.zip


TK TaeWook Kang replied to Ravikumar Venkatesan February 27, 2023 05:36 AM UTC

hi. Ravikumar,


Thanks to you, the spinner on the schedule has been resolved.


What should I do to make the spinner appear on the left side of the button instead of the spinner appearing on the schedule like the question above?


If you press the current button, you can click, but the spinner doesn't come out.


I'd like to have a spinner on the button as shown in the picture below.


Regards



RV Ravikumar Venkatesan Syncfusion Team February 27, 2023 06:07 PM UTC

TaeWook,


You are welcome. You can render the spinner at the left side of the button by rendering the button as shown in the below code snippet. Refer to the below Demo and UG link for more details.


Demo: https://ej2.syncfusion.com/javascript/demos/#/bootstrap4/button/progress-button.html

UG: https://ej2.syncfusion.com/javascript/documentation/progress-button/es5-getting-started/#enabling-progress-in-button


    function ScheduleActionBegin(args) {

        if (args.requestType === 'toolbarItemRendering') {

            var edwpBtn = { template: '<button id="EDWPBtn">', type: 'Button', align: 'Right' }

            args.items.push(edwpBtn);

        }

    }

 

    function ScheduleActionComplete(args) {

        if (args.requestType === 'toolBarItemRendered') {

            var btnObj = new ej.splitbuttons.ProgressButton({

                height: 32,

                content: "Receive EDWP Data"

            });

            btnObj.appendTo('#EDWPBtn');

        }

    }


Attachment: ej2coreschedulewithprogressbutton_91770dc8.zip

Loader.
Up arrow icon