.jqGrid with image on filter bar

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.14.1/jquery.jqgrid.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet" />

<table id="grid"></table>
<div id="myDialogBox" title="Basic dialog"></div>

CSS

.ui-search-input img.ui-datepicker-trigger {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 1px;
}

JavaScript

$(function() {
  "use strict";

  $("#myDialogBox").dialog({
    autoOpen: false
  });


  $("#grid").jqGrid({
    colModel: [{
      name: "StartRunDate",
      label: "Start Run Date",
      align: "center",
      sorttype: "date",
      formatter: function(cellval, opions, rawdata, act) {
        return $.fn.fmatter.call(this, "date", cellval, opions, rawdata, act);
      },
      formatoptions: {
        srcformat: "m/d/Y"
      },
      searchoptions: {
        sopt: ["eq", "ne", "lt", "le", "gt", "ge"],
        attr: {
          placeholder: "m/d/yyyy",
          style: "width: 110px; display: inline-block;"
        },
        dataInit: function(elem, options) {
          $(elem).datepicker({
            showOn: "button",
            buttonImage: "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
            buttonImageOnly: true
          });
        }
      }
    }, {
      name: "StartRunTime",
      label: "Start Run Time",
      align: "center",
      sorttype: "time",
      formatter: "time"
    }],
    data: [{
      BatchID: "1",
      Status: "Pending",
      StartRunDate: "7/12/2017",
      StartRunTime: "12:00",
      EndRunDate: "7/12/2017",
      EndRunTime: "1:00",
      Action: "Cancel Delivery",
      JobID: "123",
      JobName: "Test",
      ConceptName: "CPK",
      StartDate: "7/12/2017",
      EndDate: "7/12/2017",
      Frequency: "All",
      QueryLink: "Link",
      Submitter: "John Doe"
    }],
    iconSet: "fontAwesome",
    rownumbers: true,
    sortname: "invdate",
    sortorder: "desc",
    caption: ".jqGrid Test"
  }).jqGrid('filterToolbar', {
    autoSearch: true
  }).on('click', '.popup-trigger', function() {
    $("#myDialogBox").dialog("open");
  });
});