Row height in weekly view

7 posts, 1 answers
  1. Joseph
    Joseph avatar
    9 posts
    Member since:
    Feb 2008

    Posted 11 Feb 2008 Link to this post

    Is there a way to control the row height in the weekly view of the scheduler?  I know you can control the number of minutes per row, and the time label row span, but if I am going to use this control in my application, I need to be able to shrink the size of the rows.

    Is this possible?  I havent seen it in any of the examples.

    Thank you.
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 13 Feb 2008 Link to this post

    Hello Joseph,

    Yes, there is a way to control the height of the rows. Please, try the following selectors:

    <style type="text/css">  
        .RadScheduler .rsContent .rsHoursTable th   
        {  
            font-size:10px;  
            height:15px;  
        }  
       .rsContent .rsContentTable .rsCell   
        {  
           height:15px;  
        }  
        </style> 

    Feel free to contact us if you have any questions.

    All the best,
    Peter
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Answer
    Peter
    Admin
    Peter avatar
    6637 posts

    Posted 13 Feb 2008 Link to this post

    Hello Joseph,

    Actually, this solution will not work quite well under IE browser. Here is a better fix:
    <style type="text/css">  
        .RadScheduler .rsContent .rsHoursTable th   
        {  
            font-size:10px;  
            line-height15px;  
            height:15px;  
        }  
       .rsContent .rsContentTable .rsCell   
        {  
            font-size:10px;  
            line-height15px;  
            height:15px;  
        }  
        </style> 



    Greetings,
    Peter
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  4. Prasanna
    Prasanna avatar
    47 posts
    Member since:
    Oct 2012

    Posted 06 Dec 2012 Link to this post

    Hello Peter,

    The above solution doesn't work for me. I just tried the below code

       $(".rsContentTable").height(document.documentElement.clientHeight - 200 + "px");
                                    $(".rsContentWrapper").height(document.documentElement.clientHeight - 200 + "px");
                                    $(".rsContentScrollArea").height(document.documentElement.clientHeight - 200 + "px");
                                    var slotPerDay = $find("ctl00_ContentPlaceHolder1_rsBusinessHours").get_activeModel().get_slotsPerDay();
                                    var rowHeight = (document.documentElement.clientHeight - 200) / slotPerDay;

                                    for (id = 0; id < $(".rsAlt").length; id++) {
                                        $(".rsAlt")[id].style.height = rowHeight + "px";
                                    }
                                    for (trID = 0; trID < $(".rsVerticalHeaderTable tr").length; trID++) {
                                        $(".rsVerticalHeaderTable tr")[trID].style.height = rowHeight + "px";
                                    }
                                    for (trConID = 0; trConID < $(".rsContentTable tr").length; trConID++) {
                                        $(".rsContentTable tr")[trConID].style.height = rowHeight + "px";
                                    }
                     $find("ctl00_ContentPlaceHolder1_rsBusinessHours").repaint();

    the row height of the scheduler changed but the appointment height doesn't changed.

    Let me know the solution

    Thanks in advance,
    Prasanna

  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 07 Dec 2012 Link to this post

    Hi Prasanna,

    Try setting the RowHeight property of RadScheduler to increase the height of the row. 

    ASPX:
    <telerik:RadScheduler ID="RadScheduler1" runat="server" RowHeight="40px" ..... >
    </telerik:RadScheduler>

    Try overriding the default CSS as follows to increase the height of the appointment.

    CSS:
    <style type="text/css">
        .RadScheduler .rsAptOut > .rsAptMid, .RadScheduler .rsAptMid > .rsAptIn, .RadScheduler .rsAptIn > .rsAptContent
        {
            height: 30px !important;
        }
    </style>

    Hope this helps.

    Regards,
    Shinu.
  6. Prasanna
    Prasanna avatar
    47 posts
    Member since:
    Oct 2012

    Posted 07 Dec 2012 Link to this post

    Thanks for your quick replay. Its works fine for a single appointment but i have many appointments in different time.
     what to do? Let me know
  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2035 posts

    Posted 11 Dec 2012 Link to this post

    Hello,

    Since the appointment position and dimensions are calculated based on the timeslot, any change to the appointment height might cause unusual behavior. Therefore we recommend modifying the scheduler row height and this will change accordingly the appointment height property. This way you can avoid any appearance issues.   

    Regards,
    Boyan Dimitrov
    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