This is a migrated thread and some comments may be shown as answers.

Set appointment height to cell height in timeline view

11 Answers 469 Views

Scheduler

This is a migrated thread and some comments may be shown as answers.

Linda asked on 20 May 2009, 06:19 PM

Hi,

I added the following styles to my web page so that I could expand the appointment height and vertically center the label in my appointment template in the timeline view (along with clearing the background image so that I could change the color of the appointments). Unfortunately, this added vertical and horizontal scroll bars that scroll only the cells, not the header row or resource column. Note that I had no scroll bars prior to this change. If it makes a difference, my timeline view is readonly.

        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;
        }
Is there another way to do this?

Thanks for a great tool,
Linda

11 Answers, 1 is accepted

answered on 27 May 2009, 12:55 PM

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>

answered on 28 May 2009, 04:04 PM

apttemplatescroll.png

Hi Linda,

Using these settings, we got appearance as in the attached screenshot. As you can see we could not reproduce any scrollbars. Can you open a support ticket and send us a simple running project demonstrating the issue? This would be the best way to help you out quickly.

Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 04 Jun 2009, 01:22 PM

I do not have a live URL. However, this is easy to duplicate. I took the project multipleresourcevalues.zip, which I found in another post, added the references to the newest telerik build, and then ran the project in IE8 compatibility mode. As the window is resized, the scrollbars appear and disappear. Note that my environment is a 64-bit Vista machine. Also note that the scrollbar problem occurs in the Week, Month, and Timeline view, though not in the Day view. Also, it obviously has nothing to do with customizing the appointment, which is where I started this question. As I said, I'm not sure that this is really a problem that needs to be solved, since users can simply turn off compatibility mode.

answered on 22 Sep 2010, 08:57 PM

radschedulerscrollbars.jpg

I believe this is still an issue.

I have a RadScheduler control with

OverflowBehavior="Expand"

If I use compatability mode, and view the "month view", I get some unneeded scrollbars in both the vertical and horizontal direction.

The control properly expands as expected, but the introduction of the scrollbars themselves is what causes most of the scrolling. It seems if the resize were to make the monthview area 1 or 2 px taller and wider the scrollbars wouldn't show up. workaround?

Is there any known work around? I didn't find any information about using client script to resize the month-view myself, nor any OnResize event or something similar.

Everything works in non-compatibility mode.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Set appointment height to cell height in timeline view

11 Answers, 1 is accepted