JQGrid within a dialog

jqgrid

Solution

in html page place table tag which will be used to construct grid inside dialog div like

<div id="dialog-div">
 <table id="JqGrid">
</table>
 <div id="pager" style="text-align: center;  </div>
</div>

then in js first set dialog settings like

$("#dialog-div").dialog({
            width: 'auto',
            resizable: false,
            height: '395',
            autoOpen: false,
            open: function (event, ui) {
           ConstructJqGrid();
            },

        });
function ConstructJqGrid(){


jQuery("#JqGrid").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', ..., editable:true, edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue} },
      ...
   ]
...
})
}

Problem

Original source