The whole component gets re-rendered when refreshEvents() method is called

[Ivan Pohorilyi]

Hello Sycfusion team,

I've updated my Scheduler component to 25.1.39 version and got the following unexpected behavior: the whole component gets re-rendered when refreshEvents() method is called. The function description says: Refreshes the event dataSource. This method may be useful when the events alone in the schedule needs to be re-rendered. And in previous versions it worked like that. But now this function re-renders the whole component which is unexpected. I will describe why it is bad. For example someone opens 'Create event' dialog which is described by the editorTemplate function. The user entered some data in 'Create event' dialog. But before saving some function calls refreshEvents which re-renders the entire component and the data entered in 'Create event' dialog is lost. It is very annoying.

Could you please prioritize fixing this bug or at least suggest a work-around. 

Thanks,

Ivan 

[Vijay Ravi]

Hi Ivan,
 

Based on your reported query, we prepared a sample for the issue you mentioned with the editorTemplate and called the refreshEvents() method before saving or adding events. It rendered as expected, the events were saved properly, and the data was not lost. We were unable to replicate the issue. Therefore, we kindly request that you provide the following details, as this information will greatly assist us in understanding and resolving the issue effectively.

Sample: https://stackblitz.com/edit/angular-tnc9fo-5exnc7?file=src%2Fapp.component.html,src%2Fapp.component.ts

• If possible, Share the simple issue replicating sample or
• Replicate the issue in our shared sample. 
• Share the full exact schedule related code snippet,

Please get back to us with the required details for further assistance.

Regards,

Vijay

[Ivan Pohorilyi]

Hello Syncfusion team. 

I updated the feedback issue with the detailed description how to reproduce the bug: https://www.syncfusion.com/feedback/57561/the-whole-component-gets-re-rendered-when-refreshevents-method-is-called

There are screenshots, steps to reproduce and Stackblitz sample.

Thanks,

Ivan

[Vijay Ravi]

Hi Ivan,

We have validated your reported query regarding the whole component getting re-rendered when the refreshEvents() method is called while using both editorTemplate and eventTemplate. We suggest clearing the interval in the popupOpen event and resetting the interval timer in the popupClose event. Refer to the modified StackBlitz sample and video demo for your reference. Kindly try it out.

[index.js]

const onPopupOpen = () => {

    clearInterval(timer);

  };

 

  const onPopupClose = () => {

    timer = setInterval(() => {

      scheduleObj.current.refreshEvents();

    }, 20000);

  };

 

return (

    <ScheduleComponent

      height="550px"

      selectedDate={new Date(1996, 6, 9)}

      eventSettings={eventSettings}

      editorTemplate={editorTemplate}

      ref={scheduleObj}

      popupOpen={onPopupOpen}

      popupClose={onPopupClose}

    >

      <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />

    </ScheduleComponent>

  );

 

Sample: https://stackblitz.com/edit/react-9fkemw-kgxh89?file=index.js

Please get back to us if you need any further assistance.

Regards,

Vijay

Attachment: refreshEvent_video_demo_a6754c7d.zip