Custom Grid Editor
Earlier today I wrote a short tutorial on grid editing. The tutorial walked you through on how you could easily edit your data right in a grid. While this is great it really is limited to certain use cases and on top of that we are limited with what the user can chose. In our example before we had a bunch of data including the state the artist lives in. If this were a full edit screen we would allow them to select a state from a drop down but in our grid it simply provides them a text box. What if there were a way to customize the editors for each field? Well there is and it really is not that hard. This tutorial will show you a state drop down box and hopefully Ill show you some more in the near future.
Like most of my grid tutorials we are going to use the cfartgallery data source that ships with ColdFusion 8. The first thing we are going to do is create our grid, make it editable and call a function named init after the page loads. If you have been following my grid tutorials this should look famailiar.
SELECT artistId, firstname, lastname, address, city, state, postalcode, email
FROM Artists
</cfquery>
<cfset args = structNew()>
<cfset args.name = "ArtistGrid">
<cfset args.width = 600>
<cfset args.format = "html">
<cfset args.query = "getArtists">
<cfset args.stripeRows = true>
<cfset args.selectColor = "##D9E8FB">
<cfset args.selectmode = "edit">
<cfset args.onchange = "cfc:artists.editArtist({cfgridaction},{cfgridrow},{cfgridchanged})">
<cfform>
<cfgrid attributeCollection="#args#">
<cfgridcolumn name="artistid" display="false">
<cfgridcolumn name="firstname" header="First Name">
<cfgridcolumn name="lastname" header="Last Name">
<cfgridcolumn name="address" header="Address">
<cfgridcolumn name="city" header="City">
<cfgridcolumn name="state" header="State">
<cfgridcolumn name="postalcode" header="Zip">
</cfgrid>
</cfform>
<cfset ajaxOnLoad("init")>
Now comes the real magic. First we need to get our grid object using the built in ColdFusion method getGridObject(). Next we need the column model and finally using the column model we can find out the index of our state column. The reason we need the index number will become clear in a second.
grid = ColdFusion.Grid.getGridObject("ArtistGrid");
//column model cm = grid.getColumnModel();
//we need to know the column id stIndex = cm.findColumnIndex("STATE");
I am now going to create a combo box which will contain a list of all the states. Right now this will not show up or really do anything.
id:"state",
mode:"local",
triggerAction:"all",
displayField:"text",
valueField:"value",
store:new Ext.data.SimpleStore({
fields: ["value", "text"],
data: [
['AL', 'Alabama'],
['AK', 'Alaska'],
['AZ', 'Arizona'],
['AR', 'Arkansas'],
['CA', 'California'],
['CO', 'Colorado'],
['CT', 'Connecticut'],
['DE', 'Delaware'],
['DC', 'District of Columbia'],
['FL', 'Florida'],
['GA', 'Georgia'],
['HI', 'Hawaii'],
['ID', 'Idaho'],
['IL', 'Illinois'],
['IN', 'Indiana'],
['IA', 'Iowa'],
['KS', 'Kansas'],
['KY', 'Kentucky'],
['LA', 'Louisiana'],
['ME', 'Maine'],
['MD', 'Maryland'],
['MA', 'Massachusetts'],
['MI', 'Michigan'],
['MN', 'Minnesota'],
['MS', 'Mississippi'],
['MO', 'Missouri'],
['MT', 'Montana'],
['NE', 'Nebraska'],
['NV', 'Nevada'],
['NH', 'New Hampshire'],
['NJ', 'New Jersey'],
['NM', 'New Mexico'],
['NY', 'New York'],
['NC', 'North Carolina'],
['ND', 'North Dakota'],
['OH', 'Ohio'],
['OK', 'Oklahoma'],
['OR', 'Oregon'],
['PA', 'Pennsylvania'],
['RI', 'Rhode Island'],
['SC', 'South Carolina'],
['SD', 'South Dakota'],
['TN', 'Tennessee'],
['TX', 'Texas'],
['UT', 'Utah'],
['VT', 'Vermont'],
['VA', 'Virginia'],
['WA', 'Washington'],
['WV', 'West Virginia'],
['WI', 'Wisconsin'],
['WY', 'Wyoming']
]
})
});
Finally each column has a defined editor. At the time the grid is built it is usually a text field or number field. To change the editor we need to set a new editor using the column models set editor method. This method takes 2 arguments, the index of the column (we got this earlier) and the new editor. The grid editor takes a form field definition. We are simply adding our combo box but this could easily be a date picker, color picker or custom editor.
For those of you just joining me I am not running 8 so I can't show you a live demo but here are some images. When you double click the cell the combo box appears with the correct value selected. Then you can choose a state and when the combo box changes a new value is selected a red marker will appear noting that the value has changed.
Here is a the final code used for the example. As always please feel free to leave your questions or comments.
<html>
<head>
<title>Edit Artist Grid</title>
<script type="text/javascript">
function init(){
//grid object grid = ColdFusion.Grid.getGridObject("ArtistGrid");
//column model cm = grid.getColumnModel();
//we need to know the column id stIndex = cm.findColumnIndex("STATE");
cb = new Ext.form.ComboBox({
id:"state",
mode:"local",
triggerAction:"all",
displayField:"text",
valueField:"value",
store:new Ext.data.SimpleStore({
fields: ["value", "text"],
data: [
['AL', 'Alabama'],
['AK', 'Alaska'],
['AZ', 'Arizona'],
['AR', 'Arkansas'],
['CA', 'California'],
['CO', 'Colorado'],
['CT', 'Connecticut'],
['DE', 'Delaware'],
['DC', 'District of Columbia'],
['FL', 'Florida'],
['GA', 'Georgia'],
['HI', 'Hawaii'],
['ID', 'Idaho'],
['IL', 'Illinois'],
['IN', 'Indiana'],
['IA', 'Iowa'],
['KS', 'Kansas'],
['KY', 'Kentucky'],
['LA', 'Louisiana'],
['ME', 'Maine'],
['MD', 'Maryland'],
['MA', 'Massachusetts'],
['MI', 'Michigan'],
['MN', 'Minnesota'],
['MS', 'Mississippi'],
['MO', 'Missouri'],
['MT', 'Montana'],
['NE', 'Nebraska'],
['NV', 'Nevada'],
['NH', 'New Hampshire'],
['NJ', 'New Jersey'],
['NM', 'New Mexico'],
['NY', 'New York'],
['NC', 'North Carolina'],
['ND', 'North Dakota'],
['OH', 'Ohio'],
['OK', 'Oklahoma'],
['OR', 'Oregon'],
['PA', 'Pennsylvania'],
['RI', 'Rhode Island'],
['SC', 'South Carolina'],
['SD', 'South Dakota'],
['TN', 'Tennessee'],
['TX', 'Texas'],
['UT', 'Utah'],
['VT', 'Vermont'],
['VA', 'Virginia'],
['WA', 'Washington'],
['WV', 'West Virginia'],
['WI', 'Wisconsin'],
['WY', 'Wyoming']
]
})
});
cm.setEditor(stIndex,new Ext.grid.GridEditor(cb));
}
</script>
</head>
<body>
<link href="/CFIDE/scripts/ajax/ext/resources/css/ytheme-aero.css" rel="stylesheet" type="text/css">
<cfquery name="getArtists" datasource="cfartgallery">
SELECT artistId, firstname, lastname, address, city, state, postalcode, email
FROM Artists
</cfquery>
<cfset args = structNew()>
<cfset args.name = "ArtistGrid">
<cfset args.width = 600>
<cfset args.format = "html">
<cfset args.query = "getArtists">
<cfset args.stripeRows = true>
<cfset args.selectColor = "##D9E8FB">
<cfset args.selectmode = "edit">
<cfset args.onchange = "cfc:artists.editArtist({cfgridaction},{cfgridrow},{cfgridchanged})">
<cfform>
<cfgrid attributeCollection="#args#">
<cfgridcolumn name="artistid" display="false">
<cfgridcolumn name="firstname" header="First Name">
<cfgridcolumn name="lastname" header="Last Name">
<cfgridcolumn name="address" header="Address">
<cfgridcolumn name="city" header="City">
<cfgridcolumn name="state" header="State">
<cfgridcolumn name="postalcode" header="Zip">
</cfgrid>
</cfform>
<cfset ajaxOnLoad("init")>
</body>
</html>
