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

[CH]

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

[Plamen]

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

[CH]

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,

[Plamen]

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

[Hunter]

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!

[Plamen]

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

[Hunter]

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.

[Plamen]

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

[Hunter]

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.