jqgrid inline edit

a basic jqgrid with inline editing capability. Click on each cell to edit it.

by Anjali Sharma

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="grid"></table>
<div id="pager"></div>

JavaScript

var mydata = [{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
}]

$("#grid").jqGrid({
    data: mydata,
    datatype: "local",
    multiselect: true,
    multiboxonly: true,
    colNames: ["Name", "Country", "Continent"],
    colModel: [{
        name: 'name',
        index: 'name'
    }, {
        name: 'country',
        index: 'country',
        editable: true,
    }, {
        name: 'continent',
        index: 'continent',
        editable: true,
    }],
    pager: '#pager',
        'cellEdit': true,
        'cellsubmit': 'clientArray',
    editurl: 'clientArray',
    onCellSelect: function (rowid, iCol, cellcontent) {
        if (iCol > 0) {
            $("#grid").jqGrid("resetSelection");
            $("#grid").setSelection(rowid, true);
        }
    },
    beforeSaveCell: function (rowID, celname, value, iRow, iCol) {
        alert(rowID);
    }
});