So, we have now looked:

  1. Creating a basic jqGrid with ColdFusion
  2. Implementing the jqGrid Filter functionality

The next step is to allow inline row editing in our grid. This is very simple to implement using jqGrid and it looks good too:

So, to start off, have a look at the Demo. Database is being changed realtime, so any updates you make will happen.

So, this time we will look at the specific changes I made in code to implement inline editing. The first change happens at the colModel. We have to specify which columns are editable, the edittype (text, textarea, checkbox, select are supported). You also specify the edit options for the columns, such as size and maxlength for a text field, values for checkbox field, etc. Full documentation on this is available on the jqGrid site. For this demo, all the fields are text fields.

view plain print about
1//The Column Model to define the data. Note you can make columns non sortable, specify width, alignment, etc.
2//We also specify the editoptions, edittype=text shows a nice textbox for inline edit.
3
4colModel :[
5{name:'id',index:'id', width:50, sorttype:"int",editrules:{integer:true}},
6{name:'FirstName',index:'FirstName', width:150, sorttype:"text",editable:true,edittype:"text",editoptions:{size:30,maxlength:50}},
7{name:'LastName',index:'LastName', width:150, align:"left",sorttype:"text",editable:true,edittype:"text",editoptions:{size:30,maxlength:50}},
8{name:'DisplayName',index:'DisplayName', width:150, align:"left",sorttype:"text",editable:true,edittype:"text",editoptions:{size:30,maxlength:50}},
9{name:'UserName',index:'UserName', width:150,align:"left",sorttype:"text",editable:true,edittype:"text",editoptions:{size:30,maxlength:50}},
10{name:'UserAccountingCode',index:'UserAccountingCode', width:150, sortable:false,editable:true,edittype:"text",editoptions:{size:15,maxlength:15}},
11{name:'Phone',index:'Phone', width:150, sortable:false,search:false,editable:true,edittype:"text",editoptions:{size:15,maxlength:12}}                ]

ID is not editable. The rest are text fields, with varying size and maxlengths specified. The next thing to do, is to allow inline editing on the grid when a row is selected. For that we have the onSelectRow event.

view plain print about
1//This is called when a row is selected.                
2onSelectRow: function(id){
3    //We verify a valid new row selection
4     if(id && id!==selectedRow)                 
5     {
6    //If a previous row was selected, but the values were not saved, we restore it to the original data.
7     $('#list').restoreRow(selectedRow);
8     //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
9 $('#list').editRow(id,true);
10 //We make use of the toolbar, to let user know Enter = save, Esc = cancel
11 $("#t_list").html("Editing - Press Enter to Save. Esc to Cancel Edit")
12 //Set the selectedRow
13 selectedRow=id;
14 }
15}

We store the selected row in a variable, so that we know to differentiate between when a new row is selected or not. the editRow function makes everything possible. We are also making use of the toolbar to display feedback to the user, let them know the "controls" of the grid. The only other thing to change was specify the editURL for the grid:

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

So, now the grid is inline editable. All we have to do is add a function to the CFC to save the data when the edit occurs.

view plain print about
1<cffunction name="editUser" access="remote" hint="Edit User Data">
2    <cfargument name="FirstName" required="yes" hint="Field that was editted">
3    <cfargument name="LastName" required="yes" hint="Field that was editted">
4    <cfargument name="DisplayName" required="yes" hint="Field that was editted">
5    <cfargument name="UserName" required="yes" hint="Field that was editted">
6    <cfargument name="UserAccountingCode" required="yes" hint="Field that was editted">
7    <cfargument name="Phone" required="yes" hint="Field that was editted">
8    <cfargument name="ID" required="yes" hint="the User that was editted">
9        
10    <!--- Take the data, update your record. Simple. --->
11    <cfquery name="editUser" datasource="RIADemo">
12    UPDATE
13        Users
14    SET
15        FirstName = '#Arguments.FirstName#',
16        LastName = '#Arguments.LastName#',
17        DisplayName = '#Arguments.DisplayName#',
18        UserName = '#Arguments.UserName#',
19        UserAccountingCode = '#Arguments.UserAccountingCode#',
20        Phone = '#Arguments.Phone#'
21    WHERE
22        ID = #Val(Arguments.ID)#
23    </cfquery>
24            
25            
26        
27</cffunction>

And we have an inline editable grid. This of course is the most basic implementation of grid editing (including instead of inline editing, showing Edit/Save/Cancel buttons on each row). I will look at implementing something more complex at a later date.

Full source code for this post Here.

Update: The Demo currently is not working as I was playing around with the code for my next blog post in the series. But I should have a new blog post on a full CRUD jquery grid up soon.

Update 2: The Demo is now same as the one for part 4. Still has Edit functionality, only its not inline.