Resource Cell Height

[Jeff Nafe]

I have a resource within the scheduler that has 3 overlapping appointments within the Timeline view.

Before the 2008 Q3 release, the resource cell would render as the following, causing this cell to grow to the same height as the height of the cell in the Timeline view:
<TR>
<TH class=rsMainHeader rowSpan=4>
<DIV class=rsHoursWrapper>
<DIV class=rsHoursContent><SPAN class=rnFormat id=9027>Doe, John</SPAN> </DIV>
</DIV>
</TH>
<TH class=rsSubHeaderHidden>
<DIV class=rsHoursWrapper>
<DIV class=rsHoursContent></DIV></DIV></TH></TR>
<TR>

Now, with the 2008 Q3 release, my resource cell is not growing in height in correlation with the Timeline's cell. So, if i have 3 stacked appointments, the resource cell is still only "one row" in height, causing that and subsequent records to be misaligned. The rendered HTML is the following:
<TR class=rsMainHeader style="HEIGHT: 100px">
<TH>
<DIV style="WIDTH: 100px">Doe, John </DIV>
</TH>
</TR>





In my opinion:
1) The height attribute SHOULD NOT be added to the TR tag. Why is this here?
2) A RowSpan attribute should be added as in the previous version so that that cell will grow in correlation with the Timeline view's cell.


Thanks, Jeff

[Peter]

Hi Jeff,

Thanks for reporting an issue, but how exactly are you able to replicate the problem? Is your scenario similar to this online example: http://demos.telerik.com/aspnet/prometheus/Scheduler/Examples/TimelineView/DefaultCS.aspx

I didn't observe any issues when adding multiple appointments. Please, give us more details so we can observe the problem at our end.

All the best,
Peter
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jeff Nafe]

Hey Peter-

In that example, what would happen if Margaret Morrison had 5 appointments on 6/8/2007? This would be an example of our issue. In our case, when that happens, the "resource cell" (containing "Margaret Morrison") would not grow in height as the timeline's row grew in height.

With the previous version, this was kept in synch via the rowspan attribute, but that doesn't appear to be the case anymore.

If necessary, I can put a test project together, but I'd rather see if you can see the issue with this example first.

Thanks, Jeff

[Peter]

Hello Jeff,

Please, see the attached screenshot of what we get on our side. I tested with both IE7 and FF3. Could I be missing something?



Kind regards,
Peter
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jeff Nafe]

Hey Peter-

That does look right. Could you show me what the source behind the "Margaret Morrison" cell is? i.e. How it's rendered.

Thanks, Jeff

[Peter]

No problem - please see the attached screenshot taken for IE dev toolbar.


Kind regards,
Peter
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jeff Nafe]

Actually, what I'd like to see is the rendered HTML behind the resource's cell. For example, mine is:

<TR class=rsMainHeader style="HEIGHT: 40px"><TH>
<DIV style="WIDTH: 100px">Doe, John </DIV></TH></TR>

Previous, the rsMainHeader class was on the TH tag, and their was no style, Height attribute, but a RowSpan attribute instead.

Thanks, Jeff

[Alex Gyoshev]

Hello Jeff,

The rendering in the Q3 release has been changed, indeed. The change has been done because of the enormous overhead that wasn't necessary - e.g. for the scenario that you described, there were 4 hidden cells (rsSubHeaderHidden) in order to make the rowspan method work. In contrast, the new rendering renders only one row and one cell. The rendered height attribute is there because of the newly introduced RowHeight property, which controls the (surprise, surprise!) row height.

I am attaching a snapshot of the current rendering - which is, exactly as you described it. If something's broken, I assume that this is a result of clashing CSS styles on the page.

All the best,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jeff Nafe]

Thanks.

So, to clarify.... If I have my row height set to "25px", then the Scheduler SHOULD be smart enough to multiply that by however many tasks exist for that resource in the current display, correct?

Assuming that is correct, you're probably right that I have some conflicting style that is preventing this from occurring.

Thanks, Jeff

[Jeff Nafe]

OK, my issue was due to a style issue. Now I have a different, but related issue.

I have our RowHeight set to 20px. For simplicity, every resource has 1 appointment. So, that gives that row a height of 40px (20px for the appointment, then 20px tied to the "rsLastSpacingWrapper" div)

In our app, we wanted to eliminate alot of that whitespace, so we have added the following class:

div.RadScheduler .rsTimelineView .rsAllDayRow td .rsLastSpacingWrapper
{
    height: 5px !important;
}

What this does is cut down the rsLastSpacingWrapper div from 20px to 5px. (and the total row height from 40px to 25px)

So, our issue is that the appointment's section has it's height reduced by 15px, but the Resources table doesn't know that, so each of these rows is still 40px in height, when we'd like them to all have their height reduced by the same 15px.

I thought that I could add a style to rsMainHeader (margin-bottom = -15px or padding-bottom = -15px, or some kind of expression saying height = height - 15), but I haven't gotten any of these to work yet.

If that doesn't make sense, I can provide more details or a sample.

Thanks, Jeff

[John Schoen]

Jeff,

Can you post your CSS that maintains the alignment for the Resource and the Appointment. I cannot get my Resources to align with my Appoitments using Timeline view. I created a support ticket, but they responded with an answer that doesn't work and they now have seemed to disappear. Any assistance will be greatly appreciated because right now the alignment issue makes this entirely useless.

I'm using 2008 Q3.

Thus far, this is my (non-working) CSS:

 

.RadScheduler td

 

{

 

vertical-align: top !important;

 

 

height: 50px !important

 

 

}

 

.RadScheduler .rsVerticalHeaderTable div

 

{

 

font-size: 11px !important;

 

 

white-space: normal !important;

 

 

width: 220px !important;

 

 

bold: true !important;

 

 

color: MidnightBlue !important;

 

 

height: 50px !important;

 

 

vertical-align: center !important;

 

}

Thanks in advance.

[Jeff Nafe]

Here's what I have that relates to that issue:

/* This decreases the hight of the rsLastSpacingWrapper (extra space in Appointments area) */
div.RadScheduler .rsTimelineView .rsAllDayRow td .rsLastSpacingWrapper
{
    height: 5px !important;
    _height: 5px !important;
}

Properties of Scheduler:
RowHeight="20px"

jQuery to reduce the Resources rows heights each by 15 px (since rsLastSpacingWrapper went from 20 to 5)
var resourcesHeightSet = false;
function setResourceRowHeights() {
    //Subtract 15px from each Resources height, since the Appointments section is being reduced from 20px to 5px (via rsLastSpacingWrapper class)
    var resRows = $(".rsMainHeader");
    for (var resRowCount = 0; resRowCount < resRows.length; resRowCount++) {
        var currentHeight = resRows[resRowCount].style.height.replace("px", "");
        var newHeight = currentHeight - 15;
        resRows.eq(resRowCount).css("height", newHeight + "px");
    }
    resourcesHeightSet = true;
}
*NOTE: Call this whenever you rebind the scheduler, resetting resourcesHeightSet to false before each time.

Hopefully that helps!

Jeff