jqGrid with bootstrap

by gunjan_prmr

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.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/moment.js/2.17.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>
<div id="outer" style="position: relative">
    <table id='grid'></table>
</div>

CSS

.bootstrap-datetimepicker-widget { font-size: 0.85em; }

JavaScript

$(function() {
  
  $("#grid").jqGrid({
    colModel: [
    { name: 'act', template: "actions" },
    { 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, 
         editoptions: {
                            dataInit: function (el) {
                        					$(el).datetimepicker({
                        					locale: 'en-GB',
                                  widgetParent: '#outer'
                                 });
                            }
                        }
      	
      }, 
      { 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: "Start Date", align: "center" }, 
      { name: "EndDate", label: "End Date" , align: "center"}, 
      { name: "Frequency", label: "Frequency", align: "center",
      	formatter: "select",
        formatoptions: { value: "ALL:All; DAI:Daily; WEK:Weekly", defaultValue: "ALL" },
        stype: "select",
        searchoptions: { value: ":All; DAI:Daily; WEK:Weekly" } },
      { name: "QueryLink", label: "Query Link", align: "center"},
      { name: "Submitter", label: "Submitter", align: "center"}
    ],
    data: [
    	{ BatchID: "1", Status: "Pending", StartRunDateTime: "7/12/2017", EndRunDateTime: "7/12/2017", Action: "Cancel Delivery",
      JobID: "123", JobName: "Test", ConceptName: "CPK",...