jqGrid

pre-load data when first page init , load ajax data then ..

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<table id="Grid" style="width:80%"></table>
<div id="pager"></div>

JavaScript

function editLink(cellValue, options, rowdata, action) {
    var editIcon = '<div title="Edit"  style="float:left;cursor:pointer;" class="ui-pg-div ui-inline-edit" onclick="jQuery.fn.fmatter.rowactions.call(this,\'formedit\');" onmouseover="jQuery(this).addClass(\'ui-state-hover\');" onmouseout="jQuery(this).removeClass(\'ui-state-hover\');"><span class="ui-icon ui-icon-pencil"></span></div>';
 
    return '<div style="margin-left:8px;">' + editIcon + delIcon + viewIcon + '</div>';
}
$(document).ready(function () {
    var myjson = {
        "rows": [{
            "id": 1,
                "cell": ["A1", "A2", "A3"]
        }, {
            "id": 2,
                "cell": ["B1", "B2", "B3"]
        }, {
            "id": 3,
                "cell": ["C1", "C2", "C3"]
        }, {
            "id": 4,
                "cell": ["D1", "D2", "D3"]
        }, {
            "id": 5,
                "cell": ["E1", "E2", "E3"]
        }, {
            "id": 6,
                "cell": ["F1", "F2", "F3"]
        }, {
            "id": 7,
                "cell": ["G1", "G2", "G3"]
        }, {
            "id": 8,
                "cell": ["H1", "H2", "H3"]
        }, {
            "id": 9,
                "cell": ["I1", "I2", "I3"]
        }, {
            "id": 10,
                "cell": ["J1", "J2", "J3"]
        }]
    };
    myGrid = jQuery("#Grid").jqGrid({
        height: '100%',
        autowidth: true,
        rownumbers: true,
        colNames: ['Field1', 'Field2', 'Field3', 'Action'],
        colModel: [{
            name: 'Field1',
            index: 'Field1',
            width: 30,
            editable: false
        }, {
            name: 'Field2',
            index: 'Field2',
            width: 50,
            editable: true,
            editrules: {
                required: true
            }
        }, {
            name: 'Field3',
            index: 'Field3',
            search: false,
            editable: true,
            edittype: 'textarea',
          ...