title: open a modal dialog on cell click in jqGrid
body: <p>I am new to jqGrid. Can you please help me on this request.</p>
  
  <p>I would like to open a new modal dialog when a cell is double clicked in jqGrid.
  Each cell will open a different modal dialog and that depends on the column, row combination. So this has to be dynamically decided.</p>
  
  <p>I am using asp.net mvc views to be shown in the dialog.</p>
  
  <p>Adding the code that I am working on : (not formatted still)</p>
  
  <pre><code>     $.ajax(
                  {
                      type: "GET",
                      url: "/Forecast/GetColumnsAndData/",
                      data: "",
                      dataType: "json",
                      success: function (result) {
                          colN = jQuery.parseJSON(result.colNames);
                          colM = jQuery.parseJSON(result.colModel);
                          jQuery("#rowed2").jqGrid({
                              url: '/Forecast/GridData/',
                              datatype: 'json',
                              mtype: 'GET',
                              colNames: colN,
                              colModel: colM,
                              rowNum: 10,
                              rowList: [10, 20, 30],
                              viewrecords: true,
                              onCellSelect: function (rowid, iCol, cellcontent) {
                                  //Need to add the code for modal dialog and criteria check
                              },
                              gridComplete: function () {
                                  var ids = jQuery("#rowed2").jqGrid('getDataIDs');
                                  for (var i = 0; i &lt; ids.length; i++) {
                                      var cl = ids[i];
                                      be = "&lt;input style='height:22px;width:20px;' type='button' value='E' onclick=\"editrows('" + cl + "');\"  /&gt;";
                                      se = "&lt;input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#rowed2').saveRow('" + cl + "', '','/Forecast/GridDataSave/');\"  /&gt;";
                                      ce = "&lt;input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#rowed2').restoreRow('" + cl + "');\" /&gt;";
                                      jQuery("#rowed2").jqGrid('setRowData', ids[i], { act: be + se + ce });
                                  }
                              },
  
                              caption: "Forecast Details"
                          });
                          jQuery("#rowed2").jqGrid('navGrid', "#prowed2", { edit: true, add: false, del: false });
                          jQuery("#rowed2").jqGrid('setGroupHeaders', {
                              useColSpanStyle: true,
                              groupHeaders: [
                                  { startColumnName: 'Hours1', numberOfColumns: 2, titleText: '&lt;center&gt;October&lt;/center&gt;' },
                                  { startColumnName: 'Hours2', numberOfColumns: 2, titleText: '&lt;center&gt;November&lt;/center&gt;' }
                                ]
                          });
                      },
                      error: function (x, e) {
                          alert(x.readyState + " " + x.status + " " + e.msg);
                      }
                  });
  </code></pre>