JQGrid within a dialog

Question

How will you display a JQGrid within a dialog?

Answer 1

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} },
      ...
   ]
...
})
}

Answer 2

This is how I did it, with AJAX to get the page containing my jqGrid :

$.ajax({
   [...],
   success: function( data ){
      var popup = document.createElement( "div" );

      // Appending
      $( popup ).append( data );
      $( "body" ).append( popup );

      // Dialoging
      $( popup ).dialog({
         [...]
      });
   }
});

PS : I don't know the rules about necroposting but since the answer was never given, I chose to answer it.