Resources stretch height for scheduler

[Inge]

How can you stretch the height for the resources so that the space is equally filled? 

[Tyler]

Do you mean stretch event height? Just from the picture it isn't completely clear what the exact issue is or what you want the final outcome to be.

 

For events, you can specify templates for them, or grab their CSS classes by using debugging tools like Chrome's debugger and looking at elements and setting height of events manually... But it looks like you aren't properly placing events inside the owner's swim lane, as they stretch out to cover two people's.

[Inge]

I want the resources (for example Dirk C. and Geert H. and all the others) to stretch in height or set min-height so there is no white space anymore. I've tried to paint something in the attachment:

 

[Tyler]

You may have to inspect the elements of the page and get into the html and try to mess with the css and take note of what classes are effected by the css changes. Chrome debugger tools are great for that. Then apply the styling to your page. 

It also kind of looks like a custom scheduler view, as I don't think one shows people on the side like that out of the box? It seems odd that events are overlapping into the next person's swim lane... so could those possibly be set up incorrectly?

[Inge]

It's not that of a custom style. I've just set the resources orientation to 'vertical' and the view to 'timeline'. I've already set the appointment style to a specifiek (I think 100px) height because i need that minimum height. I've already tried every css class to make the height of my resource bigger but nothing works. 

My opinion is that the height should at least be editable or stretch the full height of the scheduler. I just can't find a way to make the resources (or swimming lanes as you call them) bigger...

[Tyler]

That might explain why it is overflowing. If you force the events/appointments to be min height of 100px, but your swim lanes are only 50px, it will overflow into the next one. 

Have you used chrome and gone to the elements tab of the debugger? It will highlight the areas on the page that you hover over with the mouse in the html code. If you dig into that, find the html elements controlling the resources, click on them, then you can modify cssin the chrome debugger and see the results on the page without actually changing them. So you can mess around with them until you find where to place the modifications, take note of the classes, then try adding those styles to your scheduler page to make the resource height the same as the event height. 

However, if the height of the resources can only be changed by modifying element.style{} in the chrome debugger tools, you may have an issue as that indicates the styles may not be overwritable... unless you add an '!important' tag after the style you set. 

If you have tried messing with the css for resources and nothing happens, it could be they are inline styles applied by kendo which can't be overwritten easily. But if you go, say: .k-thing{color: green !imporant;} then that style should take precedence over their own styling. 

But try to be very specific with what you are using !important on, as you could mess with other elements styling.

[Tyler]

Also, is it crucial to have events be a specific size? You can add tooltips with customizable content, so even if events are smaller, the tooltips, which can pop up on hover and click, can display all the event information you need.

[Inge]

Yes it is crucial for my application that is has a specific height. I've already tried every class possible in the chrome debugger but still can't find a solution. I've already have tooltip etc. as well but my resources have to be bigger...

[Dimitar]

Hi,

When an event has two resources assigned, then it appears as an event for each of the resources separately - screenshot. I guess that you are creating an appointment for the first resource and then change its height so that it appears as occupying both resources. This could be easily achieved via CSS by only changing the height of the respective event - screenshot. However, note that the appearance, which is supported by default is placing an event for each of the resources, as noted in the screenshot. It would be helpful if you provide a Dojo sample of your setup for inspection, if further assistance is needed.

Regards,
Dimitar
Telerik by Progress

[Inge]

Just found a css solution but not that pretty:

/* resource height */
.k-scheduler-content .k-scheduler-table tr {
    height: 114px !important;
}

 

I think it would be very useful that the resources adapt to the available space or that it can be set in an clean way..

[Dimitar]

Hi,

In order to avoid using !important in the styles, you may use a stronger CSS selector, e.g.

/* resource height */
html body #schedulerId .k-scheduler-layout .k-scheduler-content .k-scheduler-table tr {
    height: 114px;
}

Regards,
Dimitar
Telerik by Progress