Restricting Scheduler's height to 100%

5 posts, 0 answers
  1. Matthew
    Matthew avatar
    26 posts
    Member since:
    Dec 2007

    Posted 25 Nov 2010 Link to this post

    Hi there.

    I have a scheduler that I would like to expand to 100% of the available screen, but NOT expand beyond that.  Setting the height of the Scheduler to 100% and then the overflow behaviour to EITHER scroll or expand does not seem to do the trick - in both instances, the scheduler expands to extend the height of the window.  This is a problem because Chrome and IE do not seem to like it when you drag appointments higher or lower up the screen (ie require an "automatic" scroll) if it is the window's scrollbar that must be used instead of the schedulers.

    I can set the height of the scheduler to say 1000 pixels to get the functionality that I'm after, but of course I won't necessarily know the height of the window.  And I can set the height with javascript onload etc, but that gets messy when dealing with ajax postbacks and dealing with window resizes etc.  Am I missing something simple?

    Thanks,

    Matthew

  2. Matthew
    Matthew avatar
    26 posts
    Member since:
    Dec 2007

    Posted 30 Nov 2010 Link to this post

    Hi there,

    Haven't had a reply on this one - perhaps I have not explained myself properly?  I would like the scheduler to size at 100% of the height of the window, but NO MORE.  The attached screenshot shows what I mean.  At the moment I am getting around this by dynamically resizing the scheduler on jquery ready, but this is not ideal, and has a problem when using the scheduler in ajax mode, as in ajax mode when a callback is done, again the scheduler resizes and goes off the bottom of the screen.

    Can anyone help?

    Thanks very much.

    Matthew
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 01 Dec 2010 Link to this post

    Hello Matthew,

    I prepared a sample project to show you how to solve your issue. You'll need to subscribe to OnClientAppointmentMoving client-side event and use the following code in the handler:

    function AppointmentMovingHandler(sender, eventArgs) {
                var scrollThreshold = 200;
                var scrollStep = 10;
      
                var draggingClue = eventArgs.get_appointment().get_element();
                if (draggingClue) {
                    var viewPortSize = $telerik.getViewPortSize();
                    var clueLocation = $telerik.getLocation(draggingClue);
                    var clueBottomEdge = clueLocation.y + draggingClue.offsetHeight;
                    var d = document.documentElement;
      
                    if (clueBottomEdge > viewPortSize.height - scrollThreshold)
                        d.scrollTop += 20;
                    else if (d.scrollTop > clueLocation.y - scrollThreshold)
                        d.scrollTop -= 20;
                }
            }

    Also to be able to maintain the scroll position of the page after postback please set the following attribute in the Page directive: MaintainScrollPositionOnPostback="true"

    Please find the full code in the attached .zip file and let me know if this was helpful.

    Best Regards,
    Veronica Milcheva
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  5. Matthew
    Matthew avatar
    26 posts
    Member since:
    Dec 2007

    Posted 06 Dec 2010 Link to this post

    Thanks Veronica,

    Unfortunately, this does not solve the issue:

    1) The scheduler still expands to longer than 100% and 
    2) When trying to drag an appointment off the bottom of the page in Chrome, the window does not scroll.    The attached screenshot sort of shows what I mean (except that you can't see where the cursor is - in this example I have pulled the appointment below the bottom of the screen).  It works fine in Firefox (though there was never a problem with FF in the first place) and IE, but not in Chrome.

    In any case, I see what you are getting at here - trying to force the browser to scroll, which is fine.  But is there not another way to make the scheduler just take up only 100% of the screen?  There are advantages to this, the main one being that when grouping by resources, the resource headers stay at the top of the screen, so when then user drags an appointment from one resource to the next, they don't have to remember which order the resources are in in order to put the appointment down in the right place.

    Thanks for your help.

    Matthew
  6. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 10 Dec 2010 Link to this post

    Hello Matthew,

    Please accept my apologies for the late reply.

    The problem is that under Safari and Chrome - scrollTop is not located in the document.documentElement but in document.body. So here's the updated code:

    function AppointmentMovingHandler(sender, eventArgs) {
                var scrollThreshold = 200;
                var scrollStep = 10;
      
                var draggingClue = eventArgs.get_appointment().get_element();
                if (draggingClue) {
                    var viewPortSize = $telerik.getViewPortSize();
                    var clueLocation = $telerik.getLocation(draggingClue);
                    var clueBottomEdge = clueLocation.y + draggingClue.offsetHeight;
                    var d = $telerik.isSafari ? document.body : document.documentElement;
      
                    if (clueBottomEdge > viewPortSize.height - scrollThreshold)
                        d.scrollTop += 20;
                    else if (d.scrollTop > clueLocation.y - scrollThreshold)
                        d.scrollTop -= 20;
                }
            }

    Please let me know if this was helpful.

    Kind regards,
    Veronica Milcheva
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017