Controlling location of confirmation box

[Brian Mains]

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.

[Peter]

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.

[GlenB]

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?

[Peter]

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

[GlenB]

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.

[Peter]

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

[GlenB]

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.

[Peter]

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

Best wishes,
Peter
the Telerik team