<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”InlineEditStandalone.aspx.cs” Inherits=”InlineEditStandalone” %>
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<title>jqGrid Inline Edit Test</title>
<!– cupertino, redmond, hot-sneaks, start, ui-darkness, mint-choc, smoothness –>
<link type=”text/css” rel=”stylesheet” href=”//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/hot-sneaks/jquery-ui.css” />
<link type=”text/css” rel=”stylesheet” href=”jqGrid/ui.jqgrid.5.0.0.css” />
<style type=”text/css”>
body {
font-family: Arial;
}
.ui-widget {
font-size: 0.8em;
}
.ui-jqrid {
font-family: 0.8em;
}
.ui-widget-overlay {
opacity: 0.4 !important;
background: inherit;
background-color: #aaa;
}
</style>
</head>
<body>
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”scriptManager” runat=”server” EnablePageMethods=”true” EnablePartialRendering=”false”>
<Scripts>
<asp:ScriptReference Path=”//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js” />
<asp:ScriptReference Path=”//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js” />
<asp:ScriptReference Path=”~/jqGrid/i18n/grid.locale-en.5.0.0.js” />
<asp:ScriptReference Path=”~/jqGrid/jquery.jqGrid.5.0.0.min.js” />
</Scripts>
</asp:ScriptManager>
<table id=”dgRegions”></table>
<table id=”pgRegions”></table>
<button id=”btnShowData” style=”display: none;”>Show Data</button>
<script type=”text/javascript”>
var data = {};
var lastSel;
function cancelEditing(myGrid) {
if (lastSel != null) {
$(myGrid).jqGrid(‘restoreRow’, lastSel);
var lrid = $.jgrid.jqID(lastSel);
$(“tr#” + lrid + ” div.ui-inline-edit, ” + “tr#” + lrid + ” div.ui-inline-del”).show();
$(“tr#” + lrid + ” div.ui-inline-save, ” + “tr#” + lrid + ” div.ui-inline-cancel”).hide();
}
}
function LoadGrid(data) {
if ($(‘#dgRegions’)[0].grid) {
$(‘#dgRegions’).jqGrid(‘GridUnload’);
}
var dgRegions = $(‘#dgRegions’).jqGrid({
datatype: ‘local’,
data: data.rows,
cmTemplate: {
searchoptions: { sopt: [‘bw’, ‘cn’, ‘nc’, ‘eq’, ‘ne’, ‘lt’, ‘le’, ‘gt’, ‘ge’, ‘bn’, ‘in’, ‘ni’, ‘ew’, ‘en’] }
},
colModel: [
{ name: ‘RegionID’, hidden: true, key: true },
{
label: ‘Region’, name: ‘RegionDescription’, index: ‘RegionDescription’, editable: true, editoptions: { size: 40, maxlength: 50 }, editrules: {
custom: true,
custom_func: function (value, label) {
if (value.trim().length === 0)
return [false, $.validator.format(‘{0}: Field is required’, label)];
else if (value.substr(0, 1) === ‘ ‘)
return [false, $.validator.format(‘{0}: Field cannot begin with space’, label)];
else
return [true, ”];
}
}
},
{
label: ‘ ‘, formatter: ‘actions’, width: 60, fixed: true, search: false,
formatoptions: {
url: ‘clientArray’,
keys: true,
delbutton: false,
onEdit: function (rowid) {
if (lastSel != null && rowid !== lastSel) {
cancelEditing($(this));
}
lastSel = rowid;
},
afterSave: function (rowid) {
var row = $(this).getRowData(rowid);
$.each(data.rows, function (i, drow) {
if (drow.RegionID === row.RegionID) {
drow.RegionDescription = row.RegionDescription;
return false;
}
});
}
}
}
],
caption: ‘R e g i o n s’,
pager: ‘#pgRegions’,
sortname: ‘RegionDescription’,
sortorder: ‘asc’,
width: 500,
height: ‘100%’,
pginput: true,
pgbuttons: true,
rowNum: 15,
rowList: [10, 15, 20, 25],
viewrecords: true,
shrinkToFit: true,
onSelectRow: function (rowid) {
if (lastSel != null && rowid !== lastSel) {
cancelEditing(this);
}
lastSel = rowid;
}
});
dgRegions
.jqGrid(‘filterToolbar’, {
searchOperators: true,
stringResult: true
})
.jqGrid(‘navGrid’, ‘#pgRegions’, { search: false, refresh: false, edit: false },
{ width: 400 },
{ width: 400 },
{ width: 400 }
);
}
$().ready(function () {
/* jqGrid 5.0.0 introduced a change that propagated the Enter key up the DOM outside the grid — code below cancels this behavior */
//$(document).on(‘keydown’, ‘.ui-jqgrid .editable’, function (e, ui) {
// if (e.which === $.ui.keyCode.ENTER) {
// e.preventDefault();
// }
//});
$(‘#btnShowData’).button().click(function (e, ui) {
alert(JSON.stringify(data));
e.preventDefault();
});
data.rows = [
{ RegionID: 1, RegionDescription: ‘Eastern’ },
{ RegionID: 2, RegionDescription: ‘Northern’ },
{ RegionID: 3, RegionDescription: ‘Southern’ },
{ RegionID: 5, RegionDescription: ‘Testing’ },
{ RegionID: 4, RegionDescription: ‘Western’ }
];
LoadGrid(data);
$(‘#btnShowData’).show();
});
</script>
</form>
</body>
</html>
.
