Using jQuery based jqGrid with ColdFusion: Part 3 : Inline Editing of Data Rows

//The Column Model to define the data. Note you can make columns non sortable, specify width, alignment, etc.
//We also specify the editoptions, edittype=text shows a nice textbox for inline edit.

colModel :[
{name:'id',index:'id', width:50, sorttype:"int",editrules:{integer:true}},
{name:'FirstName',index:'FirstName', width:150, sorttype:"text",editable:true,edittype:"text",editoptions:{size:30,maxlength:50}},
{name:'LastName',index:'LastName', width:150, align:"left",sorttype:"text",editable:true,edittype:"text",editoptions:{size:30,maxlength:50}},
{name:'DisplayName',index:'DisplayName', width:150, align:"left",sorttype:"text",editable:true,edittype:"text",editoptions:{size:30,maxlength:50}},
{name:'UserName',index:'UserName', width:150,align:"left",sorttype:"text",editable:true,edittype:"text",editoptions:{size:30,maxlength:50}},
{name:'UserAccountingCode',index:'UserAccountingCode', width:150, sortable:false,editable:true,edittype:"text",editoptions:{size:15,maxlength:15}},
{name:'Phone',index:'Phone', width:150, sortable:false,search:false,editable:true,edittype:"text",editoptions:{size:15,maxlength:12}}				]

//This is called when a row is selected.				
onSelectRow: function(id){
	//We verify a valid new row selection
    	if(id && id!==selectedRow)			    	
    	{
	//If a previous row was selected, but the values were not saved, we restore it to the original data.
       	$('#list').restoreRow(selectedRow);
       	//Makes inline editing possible. The id is the row id, and the true lets the component know that save records when user hits Enter, and Esc cancels the edit
        $('#list').editRow(id,true);
        //We make use of the toolbar, to let user know Enter = save, Esc = cancel
        $("#t_list").html("Editing - Press Enter to Save. Esc to Cancel Edit")
        //Set the selectedRow
        selectedRow=id;
        }
}

editurl:"Users3.cfc?method=editUser", //The Edit function or can be a different page to call

<cffunction name="editUser" access="remote" hint="Edit User Data">
	<cfargument name="FirstName" required="yes" hint="Field that was editted">
	<cfargument name="LastName" required="yes" hint="Field that was editted">
	<cfargument name="DisplayName" required="yes" hint="Field that was editted">
	<cfargument name="UserName" required="yes" hint="Field that was editted">
	<cfargument name="UserAccountingCode" required="yes" hint="Field that was editted">
	<cfargument name="Phone" required="yes" hint="Field that was editted">
	<cfargument name="ID" required="yes" hint="the User that was editted">
		
	<!--- Take the data, update your record. Simple. --->
	<cfquery name="editUser" datasource="RIADemo">
	UPDATE
		Users
	SET
		FirstName = '#Arguments.FirstName#',
		LastName = '#Arguments.LastName#',
		DisplayName = '#Arguments.DisplayName#',
		UserName = '#Arguments.UserName#',
		UserAccountingCode = '#Arguments.UserAccountingCode#',
		Phone = '#Arguments.Phone#'
	WHERE
		ID = #Val(Arguments.ID)#
	</cfquery>
			
			
		
</cffunction>