jqGrid with button click.

by gunjan_prmr

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/js/jquery.jqgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.css">
<table id="grid"></table>
<div id="myDialogBox" title="Basic dialog"></div>

JavaScript

$(function() {
  "use strict";
  
  $("#myDialogBox").dialog({
    autoOpen: false
  });
  
  // Set date picker
  var datePicker = function (elem, options) {
    var self = this, $elem = $(elem),
        filterOnSelect = function () {
          setTimeout(function () {
            self.triggerToolbar();
          }, 50);
        },
        triggerInputChangeOnSelect = function () {
          $elem.change();
        };

    setTimeout(function () {
      $elem.datepicker({
        dateFormat: "dd-M-yy",
        autoSize: true,
        changeYear: true,
        changeMonth: true,
        showButtonPanel: true,
        showWeek: true,
        onSelect: (options.mode === "filter" ? filterOnSelect : triggerInputChangeOnSelect)
      });
    }, 50);
  }

  // Set time picker
  var timePicker = function (elem) {
    $(elem).timepicker();
  }
 
  
  $("#grid").jqGrid({
    colModel: [
    { name: "BatchID", label: "Batch ID", align: "center"}, 
    { name: "Status",  label: "Status", align: "center", formatter: "select", 
       formatoptions: { value: "CAN:Canceled; COM:Completed; PEN:Pending", defaultValue: "PEN" },
       stype: "select", searchoptions: { value: ":Pending;CAN:Canceled; COM:Completed"} },
    { name: "StartRunDate", label: "Start Run Date", align: "center", sorttype:"date", 
      searchoptions: { sopt: ["eq"], dataInit: datePicker	} },
    { name: "StartRunTime", label: "Start Run Time", align: "center", sorttype: "time", formatter: "time", 
      searchoptions: { dataInit: timePicker	} },  
    { name: "EndRunDate", label: "End Run Date", align: "center",  editable:true, sorttype:"date",
 			searchoptions: { sopt: ["eq"], dataInit: datePicker	} },
    { name: "EndRunTime", label: "End RunTime", align: "center",  editable:true, sorttype:"time",
     searchoptions: { dataInit: timePicker	} },
    { name: "Action",  label: "Action", align: "center", formatter: "showlink"}, 
    { name: "JobID",  label: "Job ID", align: "center" }, 
    { name:...