This is a migrated thread and some comments may be shown as answers.

All Day Slots push rest of scheduler out of view when scheduler height is specified

4 Answers 368 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Sayer
Top achievements
Rank 1
Sayer asked on 15 Jun 2017, 09:02 PM

We have 'selectable' set for our scheduler as it adds great easy and fast time selections while the user has the editor open (took out modal overlay to allow them to interact with scheduler while editor is open). 

However, this has the unfortunate side effect of browser behavior jumping down the page to focus the scheduler when you click inside if you were not previously focused on the scheduler... 

I solved this by setting the height of the scheduler to the users browser window height, so the scheduler is always in view and the jumping stops. My only concern is that the all day slot is not included in the scrollable scheduler  section (the overflow of the scheduler time slots that don't fit in the view). Therefore... if someone has 20 all day events they are seeing in the current view, it is going to push the rest of the scheduler halfway down the page and greatly reduce visibility, but we need the all day slots.

Is there a better way to handle the browser jumping issue? Or is there a way to set a max height on the all day slot and make that scrollable? Or have it be part of the scrollable part of the scheduler?

4 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 19 Jun 2017, 11:55 AM

Hello Sayer,

Typically, the Scheduler's editor is supposed to work with only one event at a time. Plus, it is modal on purpose — to prevent selection of multiple events or slots.

 With the modal overlay disabled/removed we cannot guarantee the proper behavior of either the Scheduler or the editor. Thus, I would not suggest you removing the modality of the dialog. 

As editing of events is quite a complex case, and multiple slots/events makes it even more complex, I suggest you to post a feature request on the case, so that the dev team have the chance of implement a built-in multiple events editing that would work as expected and you would not need to apply workarounds, hacks or interact with the built-in functionality of the widget.

Typically, the table holding the all day events has class k-scheduler-header-all-day. You can try redecoration the element and see if you can enable scrolling. However, this is not so easy as the representation of events does not include the DOM elements of the events in the same table, which makes dynamical height to be rendered. Thus, any size adjustments might lead to even worse behavior and unexpected side effects.  

Regards,
Ianko
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sayer
Top achievements
Rank 1
answered on 19 Jun 2017, 02:04 PM

Thank you for the reply. I implemented an external editor so the editor is not effected by anything the scheduler is doing when the user selects or navigates or does anything with the scheduler and simply send the input data to my create method in my dataSource (I initially was working with the built in editor while letting the user click on the scheduler and navigate, which was very hard to keep together and got a little hacky). The external editor makes it easy though, and allows the user to open a new event while one is already open.

However, with the all day slot issue... It is basically deal with potential of seeing very little time slots if the all day part is too big, or deal with the browser jumping?

0
Ianko
Telerik team
answered on 20 Jun 2017, 07:14 AM

Hello Sayer,

I understand the case, but I am afraid that due to the complexity of the layout behind the table for all day slots table there is no easy solution that would enable you accomplish a design that would fit the situation. 

This is why such a case should be eventually handled as a feature request and properly developed by the dev team.

Regards,
Ianko
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sayer
Top achievements
Rank 1
answered on 20 Jun 2017, 02:04 PM
Alright, thank you for the information. My solution was to offer an expand button that shows entire scheduler at 100% height with no headers on the page (so no jumping from browser and no matter how big the all day field is, the user can scroll down and see entire scheduler). However, on the page with the header that causes such bad jumps from the browser, the scheduler is fit to the screen so as long as the all day is reasonably sized it will work there.
Tags
Scheduler
Asked by
Sayer
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Sayer
Top achievements
Rank 1
Share this question
or