Hours Column Height Sync

2 posts, 0 answers
  1. Eduardo
    Eduardo avatar
    7 posts
    Member since:
    Jul 2011

    Posted 12 Jan 2013 Link to this post

    Hi all,

    I followed this link to change the appointment's height and accommodate all appointments in the radscheduler.

    http://www.telerik.com/support/kb/aspnet-ajax/scheduler/auto-expand-the-height-of-the-appointment.aspx

    Since my goal is to change the week view, i changed the css to this:

    .RadScheduler .rsWeekView .rsWrap,
    .RadScheduler .rsWeekView .rsApt,
    .RadScheduler .rsWeekView .rsAptOut,
    .RadScheduler .rsWeekView .rsAptIn,
    .RadScheduler .rsWeekView .rsAptMid,
    .RadScheduler .rsWeekView .rsAptContent
    {
            position: static !important;
            height: auto !important;
            width: 120px;
    }
    .RadScheduler .rsWeekView .rsWrap
    {
            overflow: hidden;
            font-size: 0;
            line-height: 0;
    }
    .RadScheduler .rsWeekView .rsLastWrap
    {
            height: 16px !important;
    }
    .RadScheduler .rsWeekView .rsAptContent
    {
            position: relative !important;
            border-top: 0;
            border-bottom: 0;
            left: 0;
            top: 0;
    }
    * html .RadScheduler .rsWeekView .rsAptIn
    {
            border-width: 0 1px;
            top: 0;
        margin-left: -1px;
        margin-right: -1px;
    }
    * html .RadScheduler .rsWeekView .rsAptMid
    {
            top: 0;
            left: 1px;
            margin: 0 1px;
            border-width: 1px 0;
    }

    It works fine, but the hours columns height did not sync with appointment height (image attached).

    Any ideas to solve this?

    Thanks in advance.
  2.
  3. Plamen
    Admin
    Plamen avatar
    3080 posts

    Posted 17 Jan 2013 Link to this post

    Hello,

     
    The KB you linked is recommended only for MonthView because if used for the other views some unusual behavior may be caused by it.

    Nevermind if you insist on using it in your scenario one possible solution may be to resize the lines accordingly wit javascript:

    function pageLoad() {
                   var $ = $telerik.$;
                   var rsVerticalHeaderTableTh = $(".rsVerticalHeaderTable th");
                   var rsAllDayTableTr = $(".rsContentTable tr");
                   rsAllDayTableTr.each(function (index, elem) {
                       var h = $(elem).height() - 1;
                       rsVerticalHeaderTableTh[index].style.cssText = "height:" + h + "px";
                   });
               }

    Hope this will be helpful.All the best,
    Plamen
    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