Below a simplified version of my page. This code results in unnecessary vertical and horizontal scrollbars that move only the cells. I have discovered that this problem does not occur in IE8, only IE7. I also discovered another post that talked about setting background colors by walking through the webcontrols; that works, so I have a solution, but I don't like having to individually set the background on five different controls. It would seem that there should be an easier way (which is why I was was trying to use styles). Also note that I had to call the javascript function at the bottom (which I found in another post) to have the appointment span the proper width.
Thanks for your help,
Linda
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="NoMasterPage.aspx.vb" Inherits="NoMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>System Maintenance</title>
<style type="text/css">
div.RadScheduler .rsAptContent, div.RadScheduler .rsAptIn, div.RadScheduler .rsAptMid, div.RadScheduler .rsAptOut
{
background-image: none !important;
background: none;
margin: 0px;
padding-top: 1px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 3px;
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadScheduler runat="server" ID="RadScheduler1" SelectedView="TimelineView"
GroupBy="Person" GroupingDirection="Vertical" DataKeyField="ID"
DataSubjectField="Subject" DataStartField="StartDateTime"
DataEndField="EndDateTime" DataRecurrenceField="RecurrenceRule"
DataRecurrenceParentKeyField="RecurrenceParentID" ColumnWidth="40px"
Width="100%" RowHeaderWidth="200px" ReadOnly="True" Skin="Web20" AllowDelete="False"
AllowEdit="False" AllowInsert="False" CustomAttributeNames="LocationID,Annotations,ColorValue,LocationAbbreviation"
HoursPanelTimeFormat="htt" ValidationGroup="RadScheduler1"
RowHeight="18px" Font-Names="tahoma"
Font-Size="10pt" Font-Bold="True" TimeLabelRowSpan="1"
FirstDayOfWeek="Monday" LastDayOfWeek="Friday"
OverflowBehavior="Expand" EnableResourceEditing="False" ShowAllDayRow="False"
ShowHoursColumn="False" TimelineView-ShowInsertArea="False"
DataSourceID="ObjectDataSource2" >
<TimelineView ColumnHeaderDateFormat="hh:mm" ShowInsertArea="False"
ReadOnly="True" GroupingDirection="Vertical"
HeaderDateFormat="M/d/yyyy h:mm tt" NumberOfSlots="20"
SlotDuration="00:30:00" StartTime="08:00:00"></TimelineView>
<AppointmentTemplate>
<asp:label ID="Label2" runat="server" Text='<%#Eval("LocationAbbreviation")%>' Font-Bold="True"></asp:label>
</AppointmentTemplate>
<ResourceTypes>
<telerik:ResourceType DataSourceID="ObjectDataSource1" ForeignKeyField="Person.UserID"
Name="Person" TextField="LastName" KeyField="UserID" />
</ResourceTypes>
</telerik:RadScheduler>
<asp:ObjectDataSource ID="ObjectDataSource2" runat="server"
SelectMethod="FindAll" TypeName="CalendarData.LCPSAppointment">
</asp:ObjectDataSource>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
SelectMethod="FindAll" TypeName="CalendarData.Person">
</asp:ObjectDataSource>
<script type="text/javascript">
function fixAppointmentWidth() {
// retrieve all the divs in the page (A lot)
var divs = document.getElementsByTagName("div");
// loop the divs
for (i in divs) {
// retrieve the divs class name
divclass = divs[i].className;
// check if the classname matches an appointment class (For some reason IE needs a space behind the class name, no clue as to why)
if ((divclass == "rsApt ") || (divclass == "rsApt")) {
// get the current cell width (Which is going to be a percentage)
var cellwidth = divs[i].style.width;
// strip the % and devide the remainder by 100 to fetch the ammount of cells the appointment is supposed to span
var cells = (cellwidth.substr(0, (cellwidth.length - 1)) / 100);
// fetch the current (real) pixel value clientwidth
var clientwidth = divs[i].clientWidth;
// Reset the width to clientWidth + cellcount. (This offcourse assumes the border is 1px as it generally is)
divs[i].style.width = (clientwidth + cells) + "px";
}
}
}
</script>
</form>
</body>
</html>