jQGrid Editable CRUD

HTML

<script src="http://datejs.googlecode.com/files/date.js"></script>
<script src="http://www.trirand.net/aspnetmvc/Scripts/trirand/i18n/grid.locale-en.js"></script>
<script src="http://www.trirand.net/aspnetmvc/Scripts/trirand/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/smoothness/jquery-ui.css">
<body class="ui-widget-content">
    <div id="jqgrid">
        <table id="grid"></table>
        <div id="pager"></div>
    </div>
    <div id="dialog" title="Feature not supported" style="display:none">
        <p>That feature is not supported.</p>
    </div>
</body>

CSS

.ui-jqgrid {
    position:relative
}
.ui-jqgrid .ui-jqgrid-view {
    position:relative;
    left:0;
    top:0;
    padding:0;
    font-size:11px
}
.ui-jqgrid .ui-jqgrid-titlebar {
    padding:.3em .2em .2em .3em;
    position:relative;
    font-size:12px;
    border-left:0 none;
    border-right:0 none;
    border-top:0 none
}
.ui-jqgrid .ui-jqgrid-caption {
    text-align:left
}
.ui-jqgrid .ui-jqgrid-title {
    margin:.1em 0 .2em
}
.ui-jqgrid .ui-jqgrid-titlebar-close {
    position:absolute;
    top:50%;
    width:19px;
    margin:-10px 0 0 0;
    padding:1px;
    height:18px;
    cursor:pointer
}
.ui-jqgrid .ui-jqgrid-titlebar-close span {
    display:block;
    margin:1px
}
.ui-jqgrid .ui-jqgrid-titlebar-close:hover {
    padding:0
}
.ui-jqgrid .ui-jqgrid-hdiv {
    position:relative;
    margin:0;
    padding:0;
    overflow-x:hidden;
    border-left:0 none!important;
    border-top:0 none!important;
    border-right:0 none!important
}
.ui-jqgrid .ui-jqgrid-hbox {
    float:left;
    padding-right:20px
}
.ui-jqgrid .ui-jqgrid-htable {
    table-layout:fixed;
    margin:0
}
.ui-jqgrid .ui-jqgrid-htable th {
    height:22px;
    padding:0 2px 0 2px
}
.ui-jqgrid .ui-jqgrid-htable th div {
    overflow:hidden;
    position:relative;
    height:17px
}
.ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column {
    overflow:hidden;
    white-space:nowrap;
    text-align:center;
    border-top:0 none;
    border-bottom:0 none
}
.ui-th-ltr, .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr {
    border-left:0 none
}
.ui-th-rtl, .ui-jqgrid .ui-jqgrid-htable th.ui-th-rtl {
    border-right:0 none
}
.ui-first-th-ltr {
    border-right:1px solid
}
.ui-first-th-rtl {
    border-left:1px solid
}
.ui-jqgrid .ui-th-div-ie {
    white-space:nowrap;
    zoom:1;
    height:17px
}
.ui-jqgrid .ui-jqgrid-resize {
    height:20px!important;
    position:relative;
    cursor:e-resize;
    display:inline;
    overflow:hidden
}
.ui-jqgrid .ui-grid-ico-sort {
    overflow:hidden;
   ...

JavaScript

var end_point = 'http://localhost/registry/v1/cosapi';
var corpId = "rajeshNew";
// Prepare jQgrid
  $(document).ready(function () {
  jQuery("#grid").jqGrid({
  url: 'http://localhost:52618/Sample/GetEmployeeDetails',
  datatype: "json",
  mtype: "POST",
  colNames: ['Eno', 'Ename', 'City', 'Salary','Actions'],
  colModel: [
         { name: 'Eno', index: 'Eno', width: 120, stype: 'text', height: 90, editable: true },
         { name: 'Ename', index: 'Ename', width: 150, editable: true },
         { name: 'City', index: 'City', width: 150, editable: true },
         { name: 'Salary', index: 'Salary', width: 100, height: 120, editable: true },
         {
           name: 'Actions', index: 'Actions', width: 100, height: 120, editable: true, forma  ter: 'actions',
           formatoptions: {
                            keys: true,
                            editformbutton: true
                          }
         }
        ],
        rowNum: 10,
        mtype: 'Get',
        loadonce: true,
        pager: '#jQGridDemoPager',
        viewrecords: true,
        caption: "List Employee Details",
        height: "230px"  
    });
});