Free jqGrid demo

The demo "The grid, which uses predefined formatters and templates" used on http://free-jqgrid.github.io/getting-started/index.html#the_first_grid

by gopinathkathir

HTML

<link rel="stylesheet" href="//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/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<div>
  <table id="jqGrid"></table>
  <div id="jqGridPager"></div>
</div>

JavaScript

var mydata = [{
    portal_name: "Member Portal",
    last_edit: "Gopinath"
  },
  {
    portal_name: "Provider Portal",
    last_edit: "Some one"
  }

];

$.jgrid.defaults.width = 600;
$.jgrid.defaults.responsive = true;
$.jgrid.defaults.styleUI = 'Bootstrap';

$(document).ready(function() {
  $("#jqGrid").jqGrid({
    datatype: "local",
    data: mydata,
    editurl: 'clientArray',
    height: 250,
    colModel: [{
        label: 'Portal',
        name: 'portal_name',
        width: 150,
        key: true,
        editable: true,
      },
      {
        label: 'Last Edited By',
        name: 'last_edit',
        width: 90,
        editable: true,
      }
    ],
    loadonce: true,
    viewrecords: true,
    caption: "Portal Navigation Administration"
  }).navGrid('#jqGridPager',
    // the buttons to appear on the toolbar of the grid
    {
      edit: true,
      add: true,
      del: true,
      search: false,
      refresh: false,
      view: false,
      position: "left",
      cloneToTop: false
    },
    // options for the Edit Dialog
    {
      editCaption: "The Edit Dialog",
      recreateForm: true,
      checkOnUpdate: true,
      checkOnSubmit: true,
      closeAfterEdit: true,
      errorTextFormat: function(data) {
        return 'Error: ' + data.responseText
      }
    },
    // options for the Add Dialog
    {
      closeAfterAdd: true,
      recreateForm: true,
      errorTextFormat: function(data) {
        return 'Error: ' + data.responseText
      }
    },
    // options for the Delete Dailog
    {
      errorTextFormat: function(data) {
        return 'Error: ' + data.responseText
      }
    });

});