i have scenario where i have to do the batch update like in save change i have send the update to the database from jgrid.
now, i am using the the array to store the updated data.
and on onafterupdate event i have to add the element to the array.
onafterupdate event is not working.
please, help me. How to use onafterupdate event.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Layout</title>
<link rel="stylesheet" href="/Content/css/base.css" />
</head>
<body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<!--<script type="text/javascript">
var check=$retrivexml;
alert(check);
</script>-->
<link href="../../Content/css/Style/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../Content/css/Style/jquery-ui-1.7.2.custom.css"
type="text/css" media="screen" />
<link rel="stylesheet" href="../../Content/css/Style/ui.jqgrid.css" type="text/css"
media="screen" />
<!-- <link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/jqModal.css" />-->
<!--<link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/datePicker.css" />-->
<!--<link href="../../Content/css/Test/jquery-ui.css" rel="stylesheet" type="text/css" />-->
<!--<link href="../../Content/css/Test/ui.jqgrid.css" rel="stylesheet" type="text/css" />-->
<script src="../../Content/js/Jgrid js/jquery.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/jquery.jqGrid.min.js" type="text/javascript"></script>
<!--<script src="../../Content/js/Jgrid js/celledit.js" type="text/javascript"></script>-->
<script src="../../Content/js/Jgrid js/ui.datepicker.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/json2.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/JsonXml.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/grid.import.js" type="text/javascript"></script>
<!--<script type="text/javascript" src="../../Content/js/Jgrid js/grid.base.js"></script>
<script type="text/javascript" src="../../Content/js/Jgrid js/grid.formedit.js"></script> -->
<script type="text/javascript">
jQuery(document).ready( function() {
var i=3;
var grid = jQuery("#test");
var MyExportToXml = function (grid) {
var dataFromGrid = {row: grid.jqGrid('getGridParam', 'data') };
var xmldata = '<?xml version="1.0" encoding="utf-8" standalone="yes"?>\n<rows>\n' +
xmlJsonClass.json2xml (dataFromGrid, '\t') + '</rows>';
alert(xmldata);
};
var AddNewRow = function(id){
var datarow = {Consultant:"",Role:"",Task:"",SDate:"",EDate:"",
Deliverables:"",Complete:""};
var lastsel2 = parseInt(id) + 1;
//debugger;
var su=jQuery("#test").addRowData(lastsel2, datarow, "last") ;
// if (su) {
// jQuery('#test').editRow(lastsel2,true);
//
// }
};
var lastsel3;
var lastsel;
jQuery("#test").jqGrid({
url:'/Content/xml/user.xml',
//url: <?xml version="1.0" encoding="UTF-8"?><rows><page>aa</page><total>aa</total><records>aa</records><row id='1'><cell>1</cell><cell>False</cell><cell>Development</cell><cell>1-1-0001 0:00:00</cell><cell>1-1-0001 0:00:00</cell><cell>Management</cell><cell>False</cell></row></rows>,
datatype: "xml",
colNames:['Consultant','Project Role', 'Task', 'Start Date','End Date','Deliverables','Complete'],
colModel:[
{name:'Consultant',index:'Consultant', width:90, editable: true,edittype:"select",editoptions:{value:"K:Kin;R:Rajesh;R:Renee;S:Sandeep"}},
{name:'Role',index:'Role', width:80, align:"right",editable:true},
{name:'Task',index:'Task', width:80, align:"right",editable:true},
{name:'SDate',index:'SDate', width:90,editable:true},
{name:'EDate',index:'EDate', width:90,editable:true},
{name:'Deliverables',index:'Deliverables', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"25"}},
{name:'Complete',index:'Complete', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Complete:Incomplete"}}
],
// onSelectRow:function(id){
// lastsel=id;
// //JQuery("#classTable").showCol("class_id");
//
// var data = jQuery("#test").getRowData(id).Consultant;
// alert(data);
// //jQuery("#classTable").jqGrid('setGridParam',data);
// },
rowNum:10,
//rowList:[10,20,30],
pager: '#pagediv',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Project Planning",
forceFit : false,
cellEdit: true,
editurl:'clientArray',
cellsubmit: 'clientArray',
height: "100%",
ondblClickRow: function(id, iRow, iCol, e) {
alert(id);
//getGridParam("records")
//alert(selr);
},
//function(id, iRow, iCol, e) {alert(iRow);},
afterEditCell: function (id,name,val,iRow,iCol){
if(name=='SDate') {
jQuery("#"+iRow+"_SDate","#test").datepicker({dateFormat:"yy-mm-dd"});
}
if(name=='EDate') {
jQuery("#"+iRow+"_EDate","#test").datepicker({dateFormat:"yy-mm-dd"});
}
},
});
jQuery("#test").jqGrid('navGrid','#pagediv',{edit:false,add:false,del:false}).navButtonAdd('#pagediv', { caption:"Add", buttonicon :'ui-icon-circle-plus', title: "Add New Row",
onClickButton: function() {debugger;
// var last = jQuery('#test').jqGrid('getGridParam','records');
var GridIds = grid.getDataIDs();
var last= GridIds[GridIds.length -1 ];
AddNewRow (last);
}
});
//grid[0].onafterupdate;
grid[1].onafterupdate(function (){debugger;alert("Hellooooo")});
$("#export").click(function(){
MyExportToXml (grid);
});
});
</script>
</head>
<body>
<form id="form1" action="">
<div align="center">
<div id="pagediv">
</div>
<table id="test">
<tr>
<td />
</tr>
</table>
<input type="button" id="export" value="Export" />
</div>
</form>
</body>
</html>
</body>
</html>
Because you use cell editing the usage of afterSaveCell seems me OK for your purpose.