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

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.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://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.3/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.3/jquery.jqgrid.src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<table id="packages"></table>

JavaScript

$(function () {
    "use strict";
    var data = [
            { id: "1", Name: "Name 1", PackageCode: "83123a" },
            { id: "2", Name: "Name 1", PackageCode: "83123a" },
            { id: "3", Name: "Name 1", PackageCode: "83123a" }, 
            { id: "4", Name: "Name 1", PackageCode: "83123a" }
        ],
        $grid = $("#packages");

    $grid.jqGrid({
        data: data,
        colModel: [
            { name: "act", template: "actions" },
            { name: "id", width: 50 },
            { name: "PackageCode", width: 110 , editable: true },
            { name: "Name", width: 210, editable: true ,
            editrules: {required: true}
            }
        ],
        pager: true,
        pagerLeftWidth: 120,
        rowNum: 10,
        rowList: [1, 2, 10],
        viewrecords: true,
        rownumbers: true,
        caption: "Packages",
        sortname: "Name",
        iconSet: "fontAwesome",
        searching: {
            multipleSearch: true,
            multipleGroup: true,
            defaultSearch: "cn",
            stringResult: true
        },
        navOptions: {
            edit: false,
            del: false,
            search: false,
            refresh: false
        },
        inlineNavOptions: {
        		add: false,
            edit: true
        },
        formEditing: {
        		afterShowForm: function ($form) {
                $form.closest(".ui-jqdialog").position({
                    my: "center",
                    at: "center",
                    of: window
                });
            }
        }
    }).jqGrid("filterToolbar")
    		.jqGrid("navGrid")
        .jqGrid("inlineNav");
});