Automatically adjust the RADSchedule height and width based on the Window resolution

9 posts, 0 answers
  1. CH
    CH avatar
    48 posts
    Member since:
    Aug 2010

    Posted 04 Jan 2012 Link to this post

    Hi,
    Is there a way to automatically adjust the RADSchedule width and Height based on my user resolution. I have multiple users uses different resolution, some is 1024by 768 and some is bigger. I want to fully utilize the screen. I tried the following code but it didnt work:

    <script type="text/javascript">
     
        function OnClientAppointmentMoving(sender, eventArgs) {
            eventArgs.set_cancel(true);
        }
     
     
        function pageLoad() {
            setTimeout(function () {
                $("div.RadScheduler ").center();
            }, 100);       
        }
     
     
     
        jQuery.fn.center = function () {
            
            this.css("height", $(window).height() + "px");
            return this;
        }
     
     
    </script>
    Any advise?

    Regards
  2. Plamen
    Admin
    Plamen avatar
    3078 posts

    Posted 06 Jan 2012 Link to this post

    Hello Chuin,

    The width of the RadScheduler is set to 100% by default and you don't have to change it anywhere.

    In the case with the height you can use the client pageLoad event and use this code:

    function pageLoad() {
                   var hiddenfield = document.getElementById("HiddenField1");
                   var height = getDocHeight();
                   alert(height);
                   var scheduler = $find('<%=RadScheduler1.ClientID %>');
                   hiddenfield.value = height;
                   scheduler.set_height("" + height + "px");
               }
               function getDocHeight() {
                   //utility function to find dimensions of page
                   var D = document;
                   return Math.max(
           Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
           Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
           Math.max(D.body.clientHeight, D.documentElement.clientHeight)
       );
               }

    Please have in mind that the RadScheduler won't stretch enough if the RowHeight is not big enough. Also the height of the RadScheduler can not be set in Timeline view.

    Hope this will be helpful.
      Kind regards,
    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
  3. CH
    CH avatar
    48 posts
    Member since:
    Aug 2010

    Posted 06 Jan 2012 Link to this post

    Hi,
    Thanks for your reply. Is there any workaround for TimeLine view. I am only using Timeline view for my RADScheduler.

    I notice that if i manually overwrite the  DIV.Radscheduler css to add the Height it will work. But when i use Jquery to add the CSS it work wont. I am not sure why.

    Please advise and thanks a million.

    Regards,
  4. Plamen
    Admin
    Plamen avatar
    3078 posts

    Posted 11 Jan 2012 Link to this post

    Hi Chuin,

    In TimeLineView the visible height depends form the number of the appointments in it and changes dynamically. Unfortunately this behavior is not supported in this view.  

    Please excuse us for the inconvenience.

    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
  5. Hunter
    Hunter avatar
    44 posts
    Member since:
    Aug 2012

    Posted 11 Jan 2012 Link to this post

    Hi Plamen,

    You wrote, "RadScheduler won't stretch enough if the RowHeight is not big enough". My question is, how should I determine a RowHeight that is "big enough"? In my scenario I have a container (div) which is resized on the client to fill a portion of the screen via javascript. The height and width of this container is dynamic which doesn't allow me to set a RowHeight at design time. What I would like to do is to find a way to determine the RowHeight from within my javascript function which handles the sizing of the scheduler's container. The calculated height should produce no scrollbars and force the scheduler to fill the entire area of its container. Is this possible? I'm looking to mimic the sizing/resizing functionality that can be found in Outlook 2010 calendar (if possible). Thanks!
  6. Plamen
    Admin
    Plamen avatar
    3078 posts

    Posted 16 Jan 2012 Link to this post

    Hello Hunter,

     
    What I meant was that the RowHeight should be set according to the desired height. If the Scheduler did not reached the height (that is set in the in the clients code) then it seems that the RowHeight should be increased. 

    Unfortunately your scenario is supported only when RadScheduler has scrollbars.

    Hope this will be helpful.

    Regards,
    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
  7. Hunter
    Hunter avatar
    44 posts
    Member since:
    Aug 2012

    Posted 16 Jan 2012 Link to this post

    Thanks for the reply!!! :)
    If scrollbars are necessary, does this mean that I simply need to set the RowHeight property server side (design time and/or run time) to something that will always produce a scheduler which is larger then the control's container (ex. RowHeight="80px")? If I've heard you wronge could you please provide an example of what I've described?

    In an attempt to find a solution I've added an asp timer control to my page which posts back after my page has finished resizing. In this postback I am setting a RowHeight value which always produces the slightest overflow (OverflowBehavior="Scroll"). While this works I'd like to think there is a better way. It seems I could be on the right track if I had access to the "RowHeight" property client side?

    Thanks again for your time.
  8. Plamen
    Admin
    Plamen avatar
    3078 posts

    Posted 19 Jan 2012 Link to this post

    Hi Hunter,

     
    Yes that is exactly what I was trying to explain! 

    As for the RowHeight property,  you can get it client-side as shown bellow:

    var scheduler = $find('<%=RadScheduler1.ClientID %>');
              alert(scheduler.get_rowHeight());

    Unfortunately you can't set it there. Kind regards,
    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
  9. Hunter
    Hunter avatar
    44 posts
    Member since:
    Aug 2012

    Posted 19 Jan 2012 Link to this post

    Thank you for clarifying this for me. :)
    I think I'll stick with my timer solution for now and day dream of a future where we can call scheduler.set_rowHeight('45px') ;)

    Thank you again for your time and expertise.
Back to Top