.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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.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" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.css">

<table id="grid"></table>

JavaScript

$(function() {
  "use strict";

  $("#grid").jqGrid({
    colModel: [{
      name: "StartRunTime",
      label: "Start Run Time",
      align: "center",
      sorttype: "time",
      formatter: "time",
      searchoptions: {
        dataInit: function(element) {
          $(element).timepicker();
        }
      }
    }],
    data: [{
      StartRunTime: "12:00"
    }],
   
    caption: ".jqGrid Test"
  }).jqGrid('filterToolbar', {
    autoSearch: true
  });
});