Binding of Schedule control causing data saving problems

[Robert]

Hi,

I'm using the Schedule control, bound to a Lightswitch entity query. I only want to use the control to read and display the underlying data, not update it. The problem I'm experiencing is that once the page is loaded and I try to take an action or browse to another page, I receive the Lightswitch message box "Unsaved Changes" : There are unsaved changes on this page.

It appears that the control is using 2 way binding and updating some of the data in the underlying data source, despite no action having been taken.

I tried to work around the problem by implementing the following to force read-only behavior, but the problem persists:

• readOnly: true
• allowDragAndDrop: false
• enableAppointmentResize: false
• showQuickWindow: false
• beforeAppointmentChange, appointmentWindowOpen, cellDoubleClick, have all been implemented to cancel calls to them using args.cancel = true;
  

Is there some setting I'm missing or some way to work around the problem? I can provide a link and login to the application so that you can reproduce the issue, please let me know where you'd like it sent.

[Karthigeyan Krishnamurthi]

Hi Robert,   

   

Thank you for contacting Syncfusion support.   

   

We were unable to reproduce the reported issue “Displaying the alert window when the browser is navigated” at our end and for the same we had prepared the sample which can be download from the below link:   

http://www.syncfusion.com/downloads/support/forum/126071/ze/Sample2077893646   

   

Kindly try with the above sample and if an issue still persists at your end, try to reproduce the error in the sample and revert else share your application link and login credential to proceed further.

Regards,
Karthigeyan   

 

[Robert]

Hi Karthigeyan,

I used the sample as a basis and adjusted it to use a native Lightswitch data source and reproduced the problem. Steps to reproduce:

1. Browse to the MySchedules screen and create a new schedule
2. Go to the home page and confirm the schedule is shown
3. Double click on the schedule shown in the control
4. Try to browse to the MySchedules screen, you should receive the message about Unsaved changes.

Please note that I am using VS2015, so I had to upgrade the project. The updated project can be downloaded from https://www.dropbox.com/sh/t35tfdvc712n94j/AAC0U1vKUHgwlakeaK93tqkLa?dl=0

[Karthigeyan Krishnamurthi]

Hi Robert,   

   

Thanks for sharing your sample.   

   

When we double click on the Scheduler appointment, edit window will be opened with the Done option as disabled and if we navigate the browse to another page after clicking close button, Lightswitch message box will appear which is the default behavior of the Light Switch. Since readOnly is enabled on Scheduler, opening an appointment window can be prevented by setting arg.cancel to true in appointmentWindowOpen event function, which will be raised before opening an appointment window. Kindly follow the same for appointmentClick, dragStart and resizeStart events.    

 

<Code> 

//For Schedule Rendering  

        itemTemplate.ejSchedule({ 

            ---------- 

            ---------- 

            readOnly: true, 

            appointmentWindowOpen: "onCancel", 

            appointmentClick: "onCancel", 

            dragStart: "onCancel", 

            resizeStart: "onCancel", 

            ---------- 

            ---------- 

        }); 

function onCancel(args) { 

    args.cancel = true; 

} 

</Code> 

Regards, 

Karthigeyan 

[Robert]

Hi Karthigeyan,

I have used the settings you specify, but the behaviour still persist. Just to be clear on the steps I take:

1. Double click an appointment in the calendar. Nothing happens since we have set all of the events to cancel.
2. Browse to another page, in this case, the MySchedules page. The message below appears:

 

So the double click is causing the control to alter some information on the underlying data. Since we have set everything to cancel and be read only, one would not expect any information on the underlying data to be changed by the control.

[Karthigeyan Krishnamurthi]

Hi Robert, 

 

We regret for the inconvenient caused. 

 

We request you to try the following code example to overcome the reported issue at your end. Method cancelChanges will undo all changes in the current changeset and prevent the Lightswitch message box from opening.  

  

<Code> 

itemTemplate.ejSchedule({ 

            -------- 

            -------- 

            readOnly: true, 

            appointmentWindowOpen: "onCancel", 

            -------- 

            -------- 

        }); 

function onCancel(args) { 

    args.cancel = true; 

    myapp.cancelChanges(); 

} 

</Code> 

Regards, 

Karthigeyan 

[Robert]

Hi Karthigeyan,

I have tried it, and while the box no longer appears, the call to cancelChanges() causes a navigation to the previous page.

I attempted to instead use:
<Code>
myapp.activeDataWorkspace.ApplicationData.details.discardChanges();
</Code>
or:
<Code>
contentItem.screen.details.dataWorkspace.ApplicationData.details.discardChanges();
</Code>

Unfortunately, the behaviour is inconsistent. Sometimes the box appears, sometimes it does not.

[Karthigeyan Krishnamurthi]

Hi Robert,   

   

Thanks for your update.   

   

When an appointment is double clicked, internally appointment details are updated in an appointment window even though, we prevent the opening of the appointment window. Therefore, only LightSwitch alert window appears while navigating the screen. Since readOnly is enabled on Scheduler, we have unwired the events associated with the appointments as shown below.    

 

<Code> 

itemTemplate.ejSchedule({ 

            -------- 

            -------- 

            readOnly: true, 

            create: "onCreate", 

            -------- 

            -------- 

        }); 

function onCreate(args) { 

    this._off(this.element, "click", ".e-workcells,.e-alldaycells,.e-alldayappointment,.e-monthcells:not('.e-othermonths'),.e-agendacells"); 

    this._off(this.element, "dblclick", ".e-workcells:not('.e-resourceheadercells'),.e-alldaycells,.e-alldayappointment,.e-monthcells:not('.e-othermonths'),.e-agendacells.e-eventcolumn,.e-agendacells.e-timecolumn"); 

} 

</Code> 

 

 

Kindly try the above suggestion and let us know if you need further assistance.   

 

Regards, 

Karthigeyan