Controlling location of confirmation box

8 posts, 0 answers
  1. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 26 Oct 2009 Link to this post

    Hello,

    Our users have a very large appointment calendar, and the confirmation for deleting appointments appears out of range because it's centered within the control, and they have many browser pages of appointments, and so the confirmation appears out of range.  Can you control where that scheduler confirmation appears?

    Thanks.
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 28 Oct 2009 Link to this post

    Hello Brian,

    You can control the positioning of the confirmation dialog via the rsModalDialog css selector. For example, try the following:
    .rsModalDialog
        {
            top: 0px !important;
            left: 0px !important;        
        }


    Greetings,
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. GlenB
    GlenB avatar
    37 posts
    Member since:
    Apr 2010

    Posted 06 Feb 2011 Link to this post

    Hi, I have implemented the CSS as suggested, but setting the top location is only useful if you are at the top of the screen when the confirmation appears. If you scrolled to another position (bottom, middle etc) then you have to scroll to the top to find it.

    My Scheduler page is quite long (many calendars grouped vertically by resource (person)) so this is causing a lot of confusion when people go to delete appointments or modify recurring ones which triggers the dialog.

    Is there a fix for this yet, perhaps with JQuery to dynamically set the position according to where you are scrolled to on the page?
  5. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 07 Feb 2011 Link to this post

    Hello Glen,

    Yes, that should be possible using jQuery. For example, try the following code:
    <script type="text/javascript">
      
            function pageLoad() {
                var $ = $telerik.$;
                $(".rsAptDelete").each(function (i) {
                    $(this).bind("click", function () {
                        setTimeout(function () {
    //                        $(".rsModalDialog ").css("top", "0px");
    //                        $(".rsModalDialog ").css("left", "0px");
                              $(".rsModalDialog ").get(0).scrollIntoView();
                        }, 100);
                    });
                });
      
            }
        </script>


    Best wishes,
    Peter
    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.
  6. GlenB
    GlenB avatar
    37 posts
    Member since:
    Apr 2010

    Posted 07 Feb 2011 Link to this post

    Hi Peter,

    Well done - thank you! I would also like to do the same for the 'recurrence confirmation dialog' as it also appears off screen, but I can't figure out the equivalent of .rsAptDelete. Are you able to tell me what selector to use for that please.

    Also, is it possible to get the function to scroll UP from the dialog slightly as it always positions the screen so the dialog is at the very top of the screen. Scrolling so the dialog appears in the center of the screen would be perfect, but if that's not possible perhaps a way to scroll up a few hundred pixels after positioning would also help so the dialog isn't at the very top.

    Cheers.
  7. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 07 Feb 2011 Link to this post


    I have attached on click of the 'delete' icon with jQuery, because there is no corresponding client event. However, for recurring appointments, you can simply handle OnClientRecurrenceActionDialogShowing. rsModalDialog stays the same.
     
    You can define your own scrollIntoView() method. For example, consider the following -
    http://stackoverflow.com/questions/1805808/jquery-scrollintoview


    Best wishes,
    Peter
    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.
  8. GlenB
    GlenB avatar
    37 posts
    Member since:
    Apr 2010

    Posted 07 Feb 2011 Link to this post

    Thanks Peter, that did the trick - I have now got things working smoothly.

    I made some slight modifications which forces the dialog to move to you current location instead of scrolling the screen, which could be helpful for anyone else with this issue:

    function pageLoad() {
         $(".rsAptDelete").each(function (i) {
            $(this).bind("click", function () {
                setTimeout(function () {
                    $(".rsModalDialog ").center();
                }, 100);
            });
        });
    }
    function OnClientRecurrenceActionDialogShowing() {
        setTimeout(function () {
            $(".rsModalDialog ").center();
        }, 100);
    }
    jQuery.fn.center = function () {
        this.css("position", "absolute");
        this.css("top", ($(window).height() - (this.outerHeight() * 2)) / 2 + $(window).scrollTop() + "px");
        return this;
    }

    Cheers.
  9. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 08 Feb 2011 Link to this post


    Thank you for sharing your code in the forums, Glen! Probably, it will be helpful to others too.

    Best wishes,
    Peter
    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