Client side resize

[Andrew Short]

Is there a way to resize the RadScheduler on the client side with the latest version of RadControls?  I am unable to find anything in the documentation regarding setting the height, etc via javascript.
Thanks.

[Peter]

Hi Andrew Short,

We discovered some problems with RadScheduler when trying to resize it on the client. We will probably fix them for the upcoming service pack on November 25.

Normally, you would be able to resize RadScheduler like this:

schedulerClientObject.get_element().style.width = "400px"
schedulerClientObject.repaint();

Best wishes,
Peter
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jose]

Is this fully functional now in Q1 2009 527 release?

Thanks.
Jose Guay

[Peter]

Hi Jose,

Thank you for asking this. Yes, we have resolved all known issues with resizing so far, but please let us know if you nitice something odd.



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

[Doug Beard]

I don't understand.  The information provided in this thread doesn't work.
repaint() throws an object doesn't support property or method in clientside as well as get_element().

This does however, work on document load but not on browser resize.
schedulerClientObject.getAttribute('style').height = panelheight;

[Peter]

Hello Doug,

Here is a simple example of how to resize RadScheduler on the client:

<script type="text/javascript">
    function resizeScheduler()
    {
        var scheduler = $find('<%=RadScheduler1.ClientID %>');
        scheduler.get_element().style.width = "100%";
        scheduler.repaint();
    }
    </script>
    <input id="Button1" type="button" onclick="resizeScheduler()" value="button" />
    <telerik:RadScheduler ID="RadScheduler1" Width="600px" runat="server"  />

Please, try it and let us know if you have further questions or concerns.



Best wishes,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Doug Beard]

Nope it doesn't work for me.
Other's have expressed that repaint() is not working as described, as well.  But there seems to be more than one problem with the code presented.  Maybe I am doing something wrong.  My goal is to detect the size of the browser, subtracting the size of the header and other design time elements of the page, filling the rest of the window with the scheduler.

$find method returns null for me, so I have moved it to a jQuery 1.3.2 methodogy $('#<%=ID.ClientID%>'), which is confirmed to grab the scheduler reference.

Problems
1.) get_elements()
Microsoft JScript runtime error: Object doesn't support this property or method
2.) repaint()
Microsoft JScript runtime error: Object doesn't support this property or method

$(document).ready(resizeScheduler());

    function resizeScheduler() {
            var viewportwidth;
            var viewportheight;
            // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
            if (typeof window.innerWidth != 'undefined') {
                viewportwidth = window.innerWidth,
                viewportheight = window.innerHeight
            }
            // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
            else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
                viewportwidth = document.documentElement.clientWidth,
                viewportheight = document.documentElement.clientHeight
            }
            // older versions of IE
            else {
                viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
                viewportheight = document.getElementsByTagName('body')[0].clientHeight
            }
            var panelheight = viewportheight - 250;


            var scheduler = $('#<%= RadScheduler1.ClientID%>');
        scheduler.get_element().style.height = panelheight;
        scheduler.repaint();
    }

[Doug Beard]

I suspect that the jQuery doesn't pull the same reference that is required as the $find is supposed to.  And that the problem with $find returning null is at the heart of the issue.

http://www.telerik.com/community/forums/aspnet-ajax/scheduler/problem-getting-client-side-references-using-find.aspx

This post seems to indicate there maybe another problem that I'm missing.

My page source does not contain:
Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadScheduler, {/*some code here*/}, null, null, $get("RadScheduler1"));

I was unable to hardcode the clientid in the script as the poster comments in his final post. 

[Doug Beard]

Update,

I moved the Telerik dlls into the PublicAssemblies folder (VS08) and now the $create is appearing in the page source for the scheduler, however I still can not obtain a reference to it via $find

[Peter]

Hi Doug,

$(document).ready() occurs too early in the page life cycle to be able to get a client side reference of RadScheduler. You should use pageLoad() instead. For example:

function pageLoad() {
    var scheduler = $find('<%=RadScheduler1.ClientID %>');
    alert(scheduler.get_id());
}

Best wishes,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.