Declined
Last Updated: 25 Oct 2022 13:01 by ADMIN
Grant
Created on: 17 Oct 2022 08:29
Category: KendoReact
Type: Bug Report
0
SchedulerItem on Resize does not inherit custom styles

Hi Team, 

If you take a look at my demo, I have 2 scheduler events, and I've created a custom SchedulerItem that renders the background of one of them to be blue.

When dragging the items around, the dragItem mains the same color with a bit of opacity, cool.

When resizing, the orange (?) one works great, this is the default color theme. However when I resize the blue one, while resizing, the resizeItem is an opaque blue, but the SchedulerItem underneath reverts back to the original default color scheme thereby mixing the colors.

Please advise.

Thanks,
Grant

4 comments
ADMIN
Wissam
Posted on: 25 Oct 2022 13:01

Hello, Grant,

Thanks for your feedback, we will make sure to add this information in the documentation as well.

I believe that you are asking about the `.k-marquee-color`. This className is responsible for the background-color of the resizing. In kendo-theme-default, the background color defaults to `#ff6358`, while in kendo-theme-bootstrap it defaults to `#1247AC`. The opacity defaults to 0.6 in both cases. Having in mind that these values are default, the color combinations(with the item's background color) will not always work. No specific color is universal to work with all other custom colors.

This is why I used the `.k-marquee-color` for the blue item in the example I sent, to change the background and opacity to match the `SchedulerItem's` blue color.

Long story made short - applying the background color of the custom item via CSS is applied only to this item wrapper. In order for the Scheduler to be able to apply a custom color to all elements related to the item's states, you will need to set the color through the colorField prop.

I hope this was helpful, let us know if you have further questions on this matter.

Regards,
Wissam
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Grant
Posted on: 24 Oct 2022 10:30

Thanks Wissam, 

I dont think there is any docs that explicitly talk about this.

Why do I have to remove this class for Resize but not for Drag?

Thanks,G

ADMIN
Wissam
Posted on: 24 Oct 2022 08:09

Hi, Grant,

Thanks for the demo,

Here is an example of the Scheduler, where only the item of id `1` has a different background color:

https://stackblitz.com/edit/react-gcbfeq?file=src%2FApp.js

In order to apply a different background color through the `SchedulerItem`, the resized item background color is changed in `CustomEditItem`. Moreover, the `k-marquee-color` has to be overwritten to display the desired background color of the resize hint. It should only be applied to the item of id 1, and this is why the item is given an additional className `removeResizeBgr`.

On a side note, the easier way to apply colors to the Scheduler's items is to directly bind the desired colors to the `colorField` prop. You can refer the following demo for a sample usage of this approach:

https://www.telerik.com/kendo-react-ui/components/scheduler/

I hope this helps, but please let us know if you have any further questions.

Regards,
Wissam
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/.

Grant
Posted on: 17 Oct 2022 08:34
After some testing, the styling bug might be the other way around, where the ResizeItem isnt inheriting the blue color.