Set appointment height to cell height in timeline view

12 posts, 0 answers
  1. Linda
    Linda avatar
    7 posts
    Member since:
    May 2009

    Posted 20 May 2009 Link to this post

    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

  2. Peter
    Admin
    Peter avatar
    6637 posts
    Member since:
    Sep 2012

    Posted 25 May 2009 Link to this post

    Hi Linda,

    How exactly do you define the appointment template. We are trying to replicate the problem locally so we can do some tests and provide you with a solution. Please, send us any relevant files that could help us in recreating this scenario.


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

  3. Linda
    Linda avatar
    7 posts
    Member since:
    May 2009

    Posted 27 May 2009 Link to this post

    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>

  4. Peter
    Admin
    Peter avatar
    6637 posts
    Member since:
    Sep 2012

    Posted 28 May 2009 Link to this post

    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.

  5. Linda
    Linda avatar
    7 posts
    Member since:
    May 2009

    Posted 03 Jun 2009 Link to this post

    This appears to be a problem only in Internet Explorer 8 compatibility mode. It does not happen either in IE7 or IE8 when it is not in compatibility mode. And it only happens when a column width is set. It is interesting when it happens--the scrollbars may not initially appear, but as the window containing the calendar is resized by the user they will appear and disappear. Given that it's only in IE8 compatibility mode, I'm not sure that it's worth trying to fix it, but it is perhaps something for users to be aware of.

    Thanks for your help,
    Linda

  6. Peter
    Admin
    Peter avatar
    6637 posts
    Member since:
    Sep 2012

    Posted 04 Jun 2009 Link to this post

    Hi Linda,

    Do you have a live url demonstrating the problem?



    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.

  7. Linda
    Linda avatar
    7 posts
    Member since:
    May 2009

    Posted 04 Jun 2009 Link to this post

    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.

  8. Peter
    Admin
    Peter avatar
    6637 posts
    Member since:
    Sep 2012

    Posted 08 Jun 2009 Link to this post

    Hi Linda,

    Thank you for your feedback. We will research the case further. We have been fixing scrolling issues latetely, though not quite the same as you describe them, but you can still try with the latest build and check if it helps:

    http://www.telerik.com/account/latest-internal-builds.aspx



    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.

  9. Chris May
    Chris May avatar
    30 posts
    Member since:
    Nov 2009

    Posted 22 Sep 2010 Link to this post

    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.

  10. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1479 posts
    Member since:
    Jul 2012

    Posted 30 Sep 2010 Link to this post

    Hi Chris,

    We couldn't reproduce this issue with the latest version of RadControls for ASP.NET AJAX. Unfortunately I can't tell you much more based only on the screenshot you've sent. The only reason I can think of is that this may happen based on your layout and additional CSS used on the page.

    Regards,
    Kamen Bundev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  11. Philipp
    Philipp avatar
    16 posts
    Member since:
    Mar 2011

    Posted 10 Jan 2012 Link to this post

    Hi everybody,

    the appearance of scrollbars in radscheduler with overflowbehavior:expand is still an issue in IE compatibility mode.
    I have the same scenario: firefox is never showing scrollbars like expected and IE in some cases shows scrollbars.
    If i turn off the compatibility mode the scrollbars disappear. I have no additional css and my scheduler is readonly in timelineview with 31 slots and bound to a webservice. I just installed the latest 2011_Q3_SP1

    Greetings,
    Philipp

  12. Plamen
    Admin
    Plamen avatar
    2130 posts
    Member since:
    Jul 2012

    Posted 16 Jan 2012 Link to this post

    Hi Philipp,

     
    Unfortunately I could not reproduce the issue with the compatibility mode in IE. Would you please be more specific in what are the exact cases when one can observe the issue?

     It can also be useful if you post the exact code of the RadScheduler.

    Greetings,
    Plamen Zdravkov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

Back to Top