This is a migrated thread and some comments may be shown as answers.

Add popup *on top* of radgrid edit popup.

2 Answers 106 Views
Grid
This is a migrated thread and some comments may be shown as answers.
G716
Top achievements
Rank 1
G716 asked on 22 Jan 2016, 08:57 PM

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!

2 Answers, 1 is accepted

Sort by
0
G716
Top achievements
Rank 1
answered on 22 Jan 2016, 09:01 PM
An alternative might be to inject a nice error message in the existing radgrid popup - while leaving it in edit/insert mode.
0
G716
Top achievements
Rank 1
answered on 22 Jan 2016, 11:52 PM

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>

Tags
Grid
Asked by
G716
Top achievements
Rank 1
Answers by
G716
Top achievements
Rank 1
Share this question
or