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