2

When I moved from triand-jqGrid 4.6.0 to free-jqGrid 4.8.0 formediting broke (Screenshot 1)

This is because my jqGrid is inside a div with position: absolute; z-index: 0; so when the edit modal is rendered inside the gbox div of the jqGrid and the overlay is appended on the body z-index rules places the dialog under the overlay. This bug was easily corrected by undoing this change from the jqGrid.src.js (This means that when I click the edit button, the edit form shows inside the grid but in the html it is appended on the body).

However, when I tried the latest codes in gitHub (the upcoming jqGrid 4.9.0) the rendering of formediting dialogs seems to have changed. because when I modify jqGrid.src.js (setting toTop to true) the form edit dialog gets rendered at the top left corner of the browser (Screenshot 2)

Here is the JSFiddle link

jQuery("#navgrid").jqGrid({
  datatype: "xmlstring",
  datastr: mystr,
  colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Closed','Ship via','Notes'],
  colModel:[
    {name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10}},
    {name:'invdate',index:'invdate', width:80,editable:true,editoptions:{size:10}},
    {name:'name',index:'name', width:90,editable:true,editoptions:{size:25}},
    {name:'amount',index:'amount', width:60, align:"right",editable:true,editoptions:{size:10}},
    {name:'tax',index:'tax', width:60, align:"right",editable:true,editoptions:{size:10}},      
    {name:'total',index:'total', width:60,align:"right",editable:true,editoptions:{size:10}},
    {name:'closed',index:'closed',width:55,align:'center',editable:true,edittype:"checkbox",editoptions:{value:"Yes:No"}},
    {name:'ship_via',index:'ship_via',width:70, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;TN:TNT"}},
    {name:'note',index:'note', width:100, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}}      
  ],
  rowNum:10,
  rowList:[10,20,30],
  pager: '#pagernav',
  iconSet: "fontAwesome",
  cmTemplate: { autoResizable: true },
  shrinkToFit: false,
  autoresizeOnLoad: true,
  autoResizing: { compact: true },
  sortname: 'id',
  viewrecords: true,
  sortorder: "desc",
  caption:"Navigator Example",
  editurl:"someurl.php",
  height:210
});

jQuery("#navgrid").jqGrid('navGrid','#pagernav',
  {}, //options
  {height:280,reloadAfterSubmit:false}, // edit options
  {height:280,reloadAfterSubmit:false}, // add options
  {reloadAfterSubmit:false}, // del options
  {} // search options
);

The position: absolute; is a constraint because it is added by jQuery UI Layout

Is there a specific setting that I can include to make jqGrid 4.9.0 compatible with jQuery ui Layout once again?

Update:

Expected Output enter image description here

RoyceBautista
  • 100
  • 8
  • you want it to be center? – winresh24 May 20 '15 at 03:42
  • No, I don't want it on center. I don't really know how to describe its position, but I've updated my question to include a screenshot of the expected output. This screenshot was possible because I switched back to jqGrid 4.8.0 – RoyceBautista May 20 '15 at 03:51
  • 1
    Thank you for the feedback I will read your post carefully later. At the first look it the problem which I described [here](http://stackoverflow.com/a/29263237/315935) and [here](http://stackoverflow.com/a/29415125/315935). I will fix the problem. One can use `$.jgrid.jqModal = $.jgrid.jqModal || {}; $.extend(true, $.jgrid.jqModal, {toTop: true});` at the beginning of your code as the workaround (I hope) or one can use `$.fn.jqm = false;` as one more alternative. – Oleg May 20 '15 at 08:41
  • '$.fn.jqm = false;' fixed it! Thank you :) – RoyceBautista May 21 '15 at 01:44
  • @Gelo32k: You are welcome! Nevertheless I'd like to do some changes in the next days to make *default modal dialogs* working better in different scenarios. The setting `$.fn.jqm = false;` force the usage more of jQuery UI instead of `jqModal` and `jqDnR` used by default. If you use jQuery UI (js and not only css) independent from jqGrid then the settings `$.fn.jqm = false;` could have sense. I'd recommend you to add [jQuery UI Touch Punch](http://touchpunch.furf.com/) too to have better support of tablets (see [here](http://stackoverflow.com/a/30374861/315935)). – Oleg May 22 '15 at 07:11

1 Answers1

1

I made some changes in free jqGrid. I hope that all described problem are solved. The default option for $.jgrid.jqModal.toTop is now true like it was before, but all dialogs will be destroyed after closing and alert dialog (warning by navGrid on click on Edit/Delete button if no row are selected) will be created only directly before it will be displayed.

Oleg
  • 220,925
  • 34
  • 403
  • 798