Scheduler Toolbar does not refresh on scheduler width changes

[Laurin S]

Hi,

when I'm changing the width of my Scheduler, the toolbar does not refresh and therefore some toolbar items, which were previously hidden (due to the missing space) are not re-shown after increasing the width (and therefore having more space in the toolbar).

I've attached a code example, that simulates the problem. When clicking on the button in the left upper corner "Show/hide waiting list", a waiting list gets displayed on the left. When dispalying the waiting list, the width of the scheduler gets decreased, therefore some items of the toolbar are set to "hidden". When hide the waiting list again, by clicking again on the button, however, the previously hidden items are not displayed again (but the would be enough space in the toolbar to show them again). Therefore, a kind of refresh of the toolbar is missing. 

Initial state:

After clicking on the button (display the waiting list -> decreasing the scheduler width):

After clicking again on the button (hiding the waiting list -> increasing the scheduler width):

Is there a way to have an automatic refresh of the toolbar when changing the width of the scheduler (and having more space in the toolbar)? Or, is there a way to manually update the toolbar and its items?

Thanks.

Attachment: reactsupzvc_41753cf.zip

[Satheesh Kumar Balasubramanian]

Hi Laurin, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query "Scheduler Toolbar does not refresh on scheduler width changes" and could reproduce the reported issue at our end. We suggest you to use Toolbar refreshOverflow method in button click to resolve the reported issue. For the same we have prepared for your reference which can be viewed from the following link. 

  

Sample: https://stackblitz.com/edit/react-schedule-toolbar-refresh-overflow?file=index.js 

  

index.js: 

  showHideWaitingList() { 

    setTimeout(() => { 

      this.setState({ 

        waitinglistVisible: !this.state.waitinglistVisible 

      }); 

      let toolbarObj = document.querySelector('.e-toolbar').ej2_instances[0]; 

      toolbarObj.refreshOverflow(); 

    }, 50); 

    // this.setState({ 

    //   waitinglistVisible: !this.state.waitinglistVisible 

    // }); 

    // this.scheduleObj.refresh(); 

  } 

  

Note: If you don't want to use setTimeout, you can use Scheduler refresh method to resolve the reported issue. 

  

Kindly try the above sample and get back to us if you need any further assistance. 

  

Regards, 

Satheesh Kumar B