Unplanned
Last Updated: 13 Sep 2021 05:23 by ADMIN
Andy
Created on: 08 Sep 2021 18:58
Category: KendoReact
Type: Feature Request
1
Kendo React overlapping items

Hi we are wanting to use the scheduler and control the display of overlapping items differently than the default.  Are there any resources you could point me to that explain how two items scheduled over the same time interact or can be customized?

If we wanted for the items to be z-indexed over each other instead of shown side-by-side, is that possible?

6 comments
ADMIN
Stefan
Posted on: 13 Sep 2021 05:23

Hello, Andy,

I can convert this to an official public feature request. We will monitor its popularity and plan it accordingly.

As for adding different classes to the event. This can be done by using the custom items, then checking the order prop. Based on that you can add a custom class or change the style:

https://stackblitz.com/edit/react-59npmr-qct1m7?file=index.html

Also, you can add this information inside the data and use props.dataItem.mySpecialField to access that information and add extra styles based on that.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Andy
Posted on: 10 Sep 2021 15:53

...Another thought might be if we could use some class to indicate which "display level" a particular item was.  Right now the only difference between items is that some are styled to the right half of the column and some to the left half (or right 1/3, middle 1/3, left 1/3...).  

It might allow for some way to visually communicate to customers that certain events override others.

Andy
Posted on: 10 Sep 2021 15:44

These event names might be better.

 

Yes if you can convert this to a request that would be helpful. It would be a valuable option to have out of the box.

 

Is there anything related to how the existing scheduler treats concurrent events that I can look at?  We would like to find some solution and I will need to find out what my options are even if the above can't be recreated exactly. I realize I'd be working with something that's not an intended feature, but again just hoping that we can find some solution until a more polished feature is available from your team.

 

Thanks for your help.

ADMIN
Stefan
Posted on: 10 Sep 2021 07:59

Hello, Andy,

Thank you for the clarification.

After discussing this with the lead developer of the Scheduler we can confirm that this will require a new feature to be added to the component in order to achieve this requirement.

We can suggest logging a new feature in our portal as this is how we determine the next features and components:

https://feedback.telerik.com/kendo-react-ui

I can also directly convert this one, but I'm not sure if these images have any private information that is not suitable for a public request.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Andy
Posted on: 09 Sep 2021 18:08

THanks Stefan, I did go through those pages but couldn't find anything related to what I'm looking for.  

 

Here's what we are trying to recreate:

 

Where there are two events over the same timeslot, one should overlap the other.  In our case we are scheduling events and one of the "wins" in priority and therefore should be shown on top of the others. The "Test Is Animated" item will be active from 2am - 3:30am, then "Aerva by Watchfire" (in red) will override that from 3:30am - 5:15am and then the "Test is Animated" will be active after 5:15am.

 

In any case, I don't see how the SchedulerItem decides whether or not to show as full-width in the day column or split with another item in the column...

 

Another UI option might be to display them side-by-side, but indicate a greyed out section where the one item takes priority over the other. This seems harder to implement, but still I don't see the part where one item "knows" anything about another item, so I can't say how hard it might be for sure.

 

ADMIN
Stefan
Posted on: 09 Sep 2021 06:05

Hello, Andy,

I can suggest checking the SchedulerItem customization article that allows the developer to customize how an item is rendered:

https://www.telerik.com/kendo-react-ui-develop/components/scheduler/customization/items/item/

If this is not helpful, please share some images of the requirement. This will help us better understand it and see what is the best option in that case.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.