jqGrid with Filter Toolbar

by gunjan_prmr

HTML

<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>
<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/free-jqgrid/4.14.0/css/ui.jqgrid.min.css">
<table id="grid"></table>

JavaScript

function initDateWithButton(elem) {
   if (/^\d+%$/.test(elem.style.width)) {
            $(elem).css({
                width: "230px"
            });
        }
        setTimeout(function () {
            $(elem).datepicker({
                dateFormat: 'dd-mm-yy',
                showOn: 'button',
                changeYear: true,
                changeMonth: true,     
                buttonImageOnly: true,
                buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                buttonText: "Select date",            
                onSelect: function (dateText, inst) {
                    if (inst.id.substr(0, 3) === "gs_") {
                         grid[0].triggerToolbar();
                    }
                    else {
                        $(inst).trigger("change");
                    }
                }
            });
        }, 100);
};

$(function () {
    "use strict";
   $("#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", align: "center" } },
      { name: "StartRunDateTime", label: "Start Run DateTime", align: "center",  editable:true, sorttype:"date",
      			editoptions: { dataInit: initDateWithButton, size: 11 },
            searchoptions: { dataInit: initDateWithButton }
      }, 
      { name: "EndRunDateTime", label: "End Run DateTime" , align: "center"}, 
      { name: "Action", label: "Action", align: "center", formatter: "showlink"}, 
      { name: "JobID", label: "Job ID", align: "center" }, 
      { name: "JobName", label: "Job Name", align: "center"}, 
      { name: "ConceptName", label: "Concept Name", align: "center" }, 
      { name: "StartDate", label:...