Hi Spimichael,

I debugged dialog and found the reason for that. That happens due to following underlined codes in jquery.dialog:

$.extend($.ui.dialog.overlay, {
 ...
 events: $.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','),
 ...
    if ($.ui.dialog.overlay.instances.length) {
     $(document).bind($.ui.dialog.overlay.events, function(event) {
      // stop events if the z-index of the target is < the z-index of the overlay
      return ($(event.target).zIndex() >= $.ui.dialog.overlay.maxZ);
     });
    }
   }, 1);
 ...

Since jquery library is public, you may easily fix that by following underlined change to jquery.dialog and use your fixed version instead of default:

     $(document).bind($.ui.dialog.overlay.events, function(event) {
      // stop events if the z-index of the target is < the z-index of the overlay
      if(dialog.element.has(event.target).length)
       return true;
      return ($(event.target).zIndex() >= $.ui.dialog.overlay.maxZ);
     });

I just tested the grid in a dialog and it worked, but only when I removed the modal: true property from the dialog.

It does not work when modal:true

$(

"#formDialogGridSetting").dialog({ autoOpen: false, width: 400, height: 00, modal: true});

It worked when modal:false

$("#formDialogGridSetting").dialog({ autoOpen: false, width: 400, height: 00, modal: false});

I need the form to be modal: true, Can you please help with this?

Thanks