JSGrid Update on Edit Cancel
HTML
<link rel="stylesheet" href="http://js-grid.com/css/jsgrid.min.css">
<link rel="stylesheet" href="http://js-grid.com/css/jsgrid-theme.min.css">
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="jsGrid"></div>
JavaScript
$('body').click(function(){
var baseEditItem = jsGrid.Grid.prototype.editItem;
jsGrid.Grid.prototype.editItem = function() {
if(this._editingRow) {
this.updateItem();
}
baseEditItem.apply(this, arguments);
};
});
var clients = [
{
"Name": "Otto Clay",
"Age": 61
},
{
"Name": "Connor Johnston",
"Age": 73
},
{
"Name": "Lacey Hess",
"Age": 29
},
{
"Name": "Timothy Henson",
"Age": 78
},
{
"Name": "Ramona Benton",
"Age": 43
}
];
$("#jsGrid").jsGrid({
height: 300,
width: "100%",
filtering: true,
editing: true,
autoload: true,
deleteConfirm: "Do you really want to delete the client?",
controller: {
loadData: function() {
return clients;
}
},
fields: [
{ name: "Name", type: "textarea", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ type: "control" }
]
});