h1

JQgrid cell Edit

January 27, 2012

We can able to Edit the grid cell value using the following code

Javascript:

$(document).ready(function(){

jQuery(“#list1”).jqGrid({

url:’test.aspx’,

datatype: “json”,

height: ‘auto’,

colNames: [‘col1′,’ col2′,’ col3′,’ col4′,’ col5′,’ col6′,

colModel:[ . . . ],

. . .

grid Complete: function()
{

var ids = jQuery(“#list1”).jqGrid(‘getDataIDs’);

for(var i=0;i < ids.length;i++)
{
var cl = ids[i];
be = “<input style=’height:22px;width:20px;’ type=’button’ value=’E’ title=’Edit’ onclick=\”jQuery(‘#list1’).jqGrid(‘editRow’,'”+cl+”‘);\” />”;
se = “<input style=’height:22px;width:20px;’ type=’button’ value=’S’ title=’Save’ onclick=\”UpdateQty(‘”+cl+”‘);\” />”;
ce = “<input style=’height:22px;width:20px;’ type=’button’ value=’C’ title=’Cancel’ onclick=\”jQuery(‘#list1’).jqGrid(‘restoreRow’,'”+cl+”‘);\” />”;
jQuery(“#list1”).jqGrid(‘setRowData’,ids[i],{act:be+se+ce});
}

},

caption : “Header Colspan”

editurl: “ProductionGetData.aspx?strMode=Production_Change”

});

Fuction:
function UpdateQty(rowId)
{
var ProductionDate = $(‘#txtProductionDate’).val();
var Shift=$(‘#drpShift’).val();
var rd = $(“#list1”).jqGrid(‘getRowData’,rowId);
jQuery(“#list1”).jqGrid(‘setGridParam’, { editurl: “DespatchGetData.aspx?strMode=Production_Change&qstrBarcodeId=”+rd.BarcodeId+”&qstrProductionDate=”+rd.ProductionDate+”&qstrShift=”+rd.Shift});
jQuery(‘#list1’).jqGrid(‘saveRow’,rowId);
reload();
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: