enable inline editing in jqGrid..

CREATE TABLE `stetbl` (                 
CREATE TABLE `ebc_group` (                                      
`id` int(11) NOT NULL auto_increment,                         
`name` varchar(255) default NULL,                             
`category` int(11) default NULL,                              
`description` text,                                           
`owner` int(11) default NULL,                                 
`visibility` enum('All','Selected') default 'All',  
`created` datetime default NULL,                              
`approved` enum('Y','N') default 'Y',                         
PRIMARY KEY  (`id`)                                           
)

	function inline_edit_test()
	{
		$data['title'] = "Inline Edit Demo jqGrid | {$this->app_name}";
		$data['main'] = 'edit_test';
		$this->load->vars($data);
		$this->load->view('admin_template');
	}

<?
	$ci =& get_instance();
	$base_url = base_url();
?>
 
<table id="list1"></table>	<!--Grid table-->
<div id="pager1"></div>		<!--Pagination div-->
 
<script type="text/javascript">
var lastsel2;	//save row ID of the last row selected
jQuery().ready(function (){
jQuery("#list1").jqGrid({
   	url:'<?=$base_url.'inline_edit_test'?>',	//Backend controller function generating grid XML
	editurl: '<?=$base_url.'edit_test_save'?>',	//Backend controller function save inline updates
	mtype : "post",		//Ajax request type. It also could be GET
	datatype: "xml",	//supported formats XML, JSON or Arrray
   	colNames:['id','Group Title','Category','Group Description','Group Owner','Created','Visibility','publish','Action'],	//Grid column headings
   	colModel:[
   		{name:'id',index:'id', width:35, align:"left", editable:true, sorttype:'int', editable: true, editrules: { edithidden: true }, hidden: true},
   		{name:'name',index:'name', width:35, align:"left", editable:true, editoptions:{size:'20',maxlength:'255'}},
   		{name:'category',index:'category', width:35, align:"left", search:false},
   		{name:'description',index:'description', width:75, align:"left", editable:true,edittype:'textarea', editoptions:{rows:'2',cols:'50'}},
   		{name:'owner',index:'owner', width:25, align:"left", search:false},
   		{name:'created',index:'created', width:20, align:"left", search:false},
   		{name:'visibility',index:'visibility', width:20, align:"left", editable:true,edittype:'select',editoptions:{value:'All:All;selected:Selected'}, search:false},
   		{name:'approved',index:'approved', width:15, align:"center", editable:true,edittype:'select',editoptions: {value:'Y:Publish;N:Ban'}, search:false},
   		{name:'act',index:'act', width:15, align:"center", editable:false, search:false},
  	],
   	rowNum:100,
   	autowidth: true,
   	height: 300,
   	rowList:[100,200,300,500,800,1000],
   	pager: '#pager1',
	toolbar: [true,"top"],
   	sortname: 'created',
    viewrecords: true,
	gridComplete: function(){
		var ids = jQuery("#list1").getDataIDs();
		for(var i=0;i < ids.length;i++){
			var cl = ids[i];
			se = "<input type='button' value='Save' onclick=\"jQuery('#list1').saveRow('"+cl+"',checksave);\"  />";		//checksave is a callback function to show the response of inline save controller function
			ce = "<input type='button' value='C' title='Cancel' onclick=\"jQuery('#list1').restoreRow('"+cl+"');\" />";
			jQuery("#list1").setRowData(ids[i],{act:se+ce});	//Save and Cancel buttons inserted via jqGrid setRowData function
		}
	},
	onSelectRow: function(id){
		if(id && id!==lastsel2){
			jQuery('#list1').restoreRow(lastsel2);	//restore last grid row
			jQuery('#list1').editRow(id,true);		//show form elements for the row selected to enable updates
			lastsel2=id;	//save current row ID so that when focus is gone it can be restored
		}
	},
    caption:"&nbsp;&nbsp;&nbsp;Inline Edit Example"
}).navGrid('#pager1',{edit:false,add:false,del:false});
 
function checksave(result)
{
	if(result.responseText!='') alert(result.responseText);
	else $("#list1").trigger("reloadGrid");
}

	function edit_test_save()
	{
		if(isset($_POST))
		{
			//model function updateRow writes and executes an UPDATE query with the data supplied
			$r = $this->DB_Func->updateRow('ebc_group',$_POST,array('id'=>$_POST['id'])); //$_POST contains all the editable data when we hit the save button in the grid
			echo $r;
		}
	}

id => 1
name => test group
description => test group test group test group test group test group test group test grou...
visibility => All
approved => Y

	function updateRow($table,$data,$where=null)
	{
		$sql = "UPDATE `$table` SET";
		foreach($data as $key => $value)
		{
			$sql .= " `$key`='".mysql_escape_string($value)."',";
		}
		$sql = substr($sql,0,-1);
		if($where!=null)
		{
			$sql .= " WHERE";
			foreach($where as $key => $value)
			{
				$sql .= " `$key`='".mysql_escape_string($value)."' AND";
			}
			$sql = substr($sql,0,-4);
		}
 
		mysql_query($sql);
		if(mysql_error())
		{
			return mysql_error()."<br>$sql";
		}
		return '';
	}