jqGrid with button click.

by gunjan_prmr

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/jquery.jqgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/css/ui.jqgrid.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/js/jquery.jqgrid.min.js"></script>
<table id="grid1"></table>
<div id="myDialogBox" title="Basic dialog"></div>

JavaScript

$(function() {
  "use strict";

  function OpenDialog() {
  alert("1");
    $("#myDialogBox").dialog("open");
  }

  $("#grid1").jqGrid({
    colModel: [
      {
        name: "QueryLink",
        id: "QueryLink",
        label: "Query Link",
        align: "center",
        formatter: function() {
          return "<button onclick='OpenDialog()'>Pop Up</button>";
        }
      }
    ],
    data: [{
      QueryLink: "Link"
    }],
    iconSet: "fontAwesome",
    rownumbers: true,
    sortname: "invdate",
    sortorder: "desc",
    caption: "Button Click Test"
  });
});