I'm using the following code to display a grid in a jquery dialog, but for some reason when the grid is in edit mode all the fields are read only. I display the same grid witout a popup and it worked fine. Can you please help with this?
$(
"#formDialogGridSetting").html("").dialog("option", "title", "Grid Setting ").load("_GridSetting/", $.param({ resortid: "R1" }), function () {$("#formDialogGridSetting").dialog("open");
Thanks
Hi Spimichael,
I tested grid in dialog and it worked without problems. In edit mode fields were editable.Please try following codes. If they will work for you, but your application does not, then try to figure out what the difference. You also may build a simple sample, which can be used to reproduce issue, zip it and attach within Options tab.
<body> <script type="text/javascript"> $(function () { $("#grid1").igGrid({ autoGenerateColumns: true, height: 150, width: 250, features: [{ name : 'Updating' }], dataSource: [{Col1: 1, Col2: 'txt1', Col3: true}, {Col1: 2, Col2: 'txt2', Col3: false}] }); $("#formDialogGridSetting").dialog(); }); </script> <div id="formDialogGridSetting"> <table id="grid1"></table> </div></body>
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?
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); });