Add popup *on top* of radgrid edit popup.

[G716]

I'd like to add a popup dialog that overlays the master table edit popup. Is this possible?

 Scenario: I have  a generic error handling routing called by the OnItemUpdated and OnItemInserted events. If there's an exception I'm displaying the error in an jscript alert box and then leaving the rad grid edit popup in edit or insert mode. This work OK, but if multiple alerts are thrown in a session Chrome will ask the user if they'd like to prevent future popups. If the users opts for this,they might not get error feedback on subsequent errors.

I tried adding a simple jquery dialogue, but it is superseded by the RadGrid popup form.

 Any suggestions appreciated!

Thanks!

[G716]

An alternative might be to inject a nice error message in the existing radgrid popup - while leaving it in edit/insert mode.

[G716]

Figured out a solution once I realized the telerik popups were using  a z-index of 2500. I load the span control with the error text and then use jquery .dialog with z-indexes that overlay the telerik edit popup. '.ui-widget-overlay' set to 3000 overlays the telerik control and then .ui-dialog with a higher z-index sets it at the highest level on the page.

 

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="divErrorPopUp" class="box" style="border-color: red; border: 2px solid red; display: none">
    <span id="spanError" runat="server">*****ERROR MESSAGE HERE*****</span>
</div>

<script type="text/javascript">
    $(window).ready(function () {
        $('#divErrorPopUp').dialog({
            resizable: false,
            height: 350,
            width: 900,
            title: "ERROR:",
            modal: true,
            open: function (event, ui) {
                $('.ui-widget-overlay').css('z-index', 3000); /* overlays telerik's 2500 z-index */
                $('.ui-dialog').css('z-index', 3103); /* overlays the 3000 z-index */
            },
            buttons: {
                close: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
</script>