jQuery Grid Plugin - jqGrid

$(document).ready(function(){
	var lastsel=0;
	$("#datagrid").jqGrid({
		url:"/?mailer/jobsajax&getdata=1",
		datatype: "json",
		height: 200,
		width: 680,
		shrinkToFit: false,
	   	colNames:['ID','Job Name','Process','Disabled','Description', 'Frequency', 'From Email', 'From Name', 'Reply Email', 'Subject', 'Content URL', 'Restricted', 'Last Run'],
	   	colModel:[
	   	    {name:'id', index:'id', hidden:true},
	   		{name:'jobname', index:'jobname', width:200, editable:true, editoptions:{size:"35",maxlength:"50"}},
	   		{name:'process', index:'process', width:80, sortable:true, editable:true, edittype:"select", editoptions:{value:"start:start;active:active;stopped:stopped"}},	
	   		{name:'disabled', index:'disabled', width:60, sortable:true, editable:true, edittype:"checkbox", editoptions:{value:"Yes:No"}},
	   		{name:'description', index:'description', width:250, sortable:true,editable:true, edittype:"textarea", editoptions:{rows:"2",cols:"35"}},
	   		{name:'frequency', index:'frequency', width:80, sortable:true, editable:true, edittype:"select", editoptions:{value:"manual:manual;daily:daily;weekly:weekly;biweekly:biweekly;monthly:monthly;annually:annually"}},
	   		{name:'fromemail', index:'fromemail', width:150, sortable:true, editable:true, editoptions:{size:"25",maxlength:"250"}},		
	   		{name:'fromname', index:'fromname', width:150, sortable:true, editable:true, editoptions:{size:"25",maxlength:"250"}},		
	   		{name:'replyemail', index:'replyemail', width:150, sortable:true, editable:true, editoptions:{size:"25",maxlength:"250"}},		
	   		{name:'subject', index:'subject', width:150, sortable:true, editable:true, editoptions:{size:"25",maxlength:"250"}},		
	   		{name:'contenturl', index:'contenturl', width:150, sortable:true, editable:true, editoptions:{size:"25",maxlength:"50"}},
	   		{name:'restricted', index:'restricted', width:60, sortable:true, editable:true, edittype:"checkbox", editoptions:{value:"Yes:No"}},
	   		{name:'lastrun', index:'lastrun', width:70, sortable:true, editable:false}	
	   	],
	   	onSelectRow: function(id){
			lastsel=id;
		},
		rowNum:50,
		rowTotal: 2000,
		rowList : [20,30,50],
		loadonce:true,
		mtype: "GET",
		rownumbers: false,
		rownumWidth: 40,
		gridview: true,
		pager: '#pager',
		sortname: 'id',
		viewrecords: true,
		sortorder: "desc", 
		editurl: "/?mailer/jobsajax",
		caption: "Email Job List",

	});
	$("#datagrid").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false}); 
	$("#editrow").click( function() {
		if(lastsel!=0){
			cursel=lastsel
			$("#datagrid").jqGrid('editRow',cursel);
			$(this).attr("disabled",true); 
			$("#saverow").attr("disabled",false);
			$("#cancel").attr("disabled",false);
		}
	});
	$("#saverow").click( function() {
		$("#datagrid").jqGrid('saveRow',cursel);
		$(this).attr("disabled",true); 
		$("#editrow").attr("disabled",false); 
		$("#addrow").attr("disabled",false); 
	});
	$("#cancel").click( function() {
		$("#datagrid").jqGrid('restoreRow',cursel);
		$(this).attr("disabled",true); 
		$("#editrow").attr("disabled",false);
		$("#addrow").attr("disabled",false); 
	});
	$("#addrow").click( function() {
		emptyItem=[{id:"",jobname:"",process:"stopped",disabled:"No",description:"",frequency:"manual",fromemail:"",fromname:"",replyemail:"",subject:"",contenturl:"",restricted:"No",lastrun:"0000-00-00"}];
		$("#datagrid").jqGrid('addRowData',0,emptyItem);
		$("#datagrid").editRow(0,true);
		$(this).attr("disabled",true); 
		$("#editrow").attr("disabled",true); 
		$("#saverow").attr("disabled",false);
		$("#cancel").attr("disabled",false);
	});
});