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.

view plain print about
1<cfquery name="getArtists" datasource="cfartgallery">
2 SELECT artistId, firstname, lastname, address, city, state, postalcode, email
3 FROM Artists
4 </cfquery>
5
6 <cfset args = structNew()>
7 <cfset args.name = "ArtistGrid">
8    <cfset args.width = 600>
9 <cfset args.format = "html">
10 <cfset args.query = "getArtists">
11 <cfset args.stripeRows = true>
12 <cfset args.selectColor = "##D9E8FB">
13 <cfset args.selectmode = "edit">
14 <cfset args.onchange = "cfc:artists.editArtist({cfgridaction},{cfgridrow},{cfgridchanged})">
15
16 <cfform>
17 <cfgrid attributeCollection="#args#">
18 <cfgridcolumn name="artistid" display="false">
19 <cfgridcolumn name="firstname" header="First Name">
20 <cfgridcolumn name="lastname" header="Last Name">
21 <cfgridcolumn name="address" header="Address">
22 <cfgridcolumn name="city" header="City">
23 <cfgridcolumn name="state" header="State">
24 <cfgridcolumn name="postalcode" header="Zip">
25 </cfgrid>
26 </cfform>
27
28 <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.
view plain print about
1//grid object
2 grid = ColdFusion.Grid.getGridObject("ArtistGrid");
3 //column model
4 cm = grid.getColumnModel();
5 //we need to know the column id
6 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.
view plain print about
1cb = new Ext.form.ComboBox({
2 id:"state",
3 mode:"local",
4 triggerAction:"all",
5 displayField:"text",
6 valueField:"value",
7 store:new Ext.data.SimpleStore({
8 fields: ["value", "text"],
9 data: [
10 ['AL', 'Alabama'],
11 ['AK', 'Alaska'],
12 ['AZ', 'Arizona'],
13 ['AR', 'Arkansas'],
14 ['CA', 'California'],
15 ['CO', 'Colorado'],
16 ['CT', 'Connecticut'],
17 ['DE', 'Delaware'],
18 ['DC', 'District of Columbia'],
19 ['FL', 'Florida'],
20 ['GA', 'Georgia'],
21 ['HI', 'Hawaii'],
22 ['ID', 'Idaho'],
23 ['IL', 'Illinois'],
24 ['IN', 'Indiana'],
25 ['IA', 'Iowa'],
26 ['KS', 'Kansas'],
27 ['KY', 'Kentucky'],
28 ['LA', 'Louisiana'],
29 ['ME', 'Maine'],
30 ['MD', 'Maryland'],
31 ['MA', 'Massachusetts'],
32 ['MI', 'Michigan'],
33 ['MN', 'Minnesota'],
34 ['MS', 'Mississippi'],
35 ['MO', 'Missouri'],
36 ['MT', 'Montana'],
37 ['NE', 'Nebraska'],
38 ['NV', 'Nevada'],
39 ['NH', 'New Hampshire'],
40 ['NJ', 'New Jersey'],
41 ['NM', 'New Mexico'],
42 ['NY', 'New York'],
43 ['NC', 'North Carolina'],
44 ['ND', 'North Dakota'],
45 ['OH', 'Ohio'],
46 ['OK', 'Oklahoma'],
47 ['OR', 'Oregon'],
48 ['PA', 'Pennsylvania'],
49 ['RI', 'Rhode Island'],
50 ['SC', 'South Carolina'],
51 ['SD', 'South Dakota'],
52 ['TN', 'Tennessee'],
53 ['TX', 'Texas'],
54 ['UT', 'Utah'],
55 ['VT', 'Vermont'],
56 ['VA', 'Virginia'],
57 ['WA', 'Washington'],
58 ['WV', 'West Virginia'],
59 ['WI', 'Wisconsin'],
60 ['WY', 'Wyoming']
61 ]
62 })
63 });
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.
view plain print about
1cm.setEditor(stIndex,new Ext.grid.GridEditor(cb));

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.
view plain print about
1<cfsetting showdebugoutput="false">
2<html>
3<head>
4 <title>Edit Artist Grid</title>
5 <script type="text/javascript">
6 function init(){
7 //grid object
8 grid = ColdFusion.Grid.getGridObject("ArtistGrid");
9 //column model
10 cm = grid.getColumnModel();
11 //we need to know the column id
12 stIndex = cm.findColumnIndex("STATE");
13
14 cb = new Ext.form.ComboBox({
15 id:"state",
16 mode:"local",
17 triggerAction:"all",
18 displayField:"text",
19 valueField:"value",
20 store:new Ext.data.SimpleStore({
21 fields: ["value", "text"],
22 data: [
23 ['AL', 'Alabama'],
24 ['AK', 'Alaska'],
25 ['AZ', 'Arizona'],
26 ['AR', 'Arkansas'],
27 ['CA', 'California'],
28 ['CO', 'Colorado'],
29 ['CT', 'Connecticut'],
30 ['DE', 'Delaware'],
31 ['DC', 'District of Columbia'],
32 ['FL', 'Florida'],
33 ['GA', 'Georgia'],
34 ['HI', 'Hawaii'],
35 ['ID', 'Idaho'],
36 ['IL', 'Illinois'],
37 ['IN', 'Indiana'],
38 ['IA', 'Iowa'],
39 ['KS', 'Kansas'],
40 ['KY', 'Kentucky'],
41 ['LA', 'Louisiana'],
42 ['ME', 'Maine'],
43 ['MD', 'Maryland'],
44 ['MA', 'Massachusetts'],
45 ['MI', 'Michigan'],
46 ['MN', 'Minnesota'],
47 ['MS', 'Mississippi'],
48 ['MO', 'Missouri'],
49 ['MT', 'Montana'],
50 ['NE', 'Nebraska'],
51 ['NV', 'Nevada'],
52 ['NH', 'New Hampshire'],
53 ['NJ', 'New Jersey'],
54 ['NM', 'New Mexico'],
55 ['NY', 'New York'],
56 ['NC', 'North Carolina'],
57 ['ND', 'North Dakota'],
58 ['OH', 'Ohio'],
59 ['OK', 'Oklahoma'],
60 ['OR', 'Oregon'],
61 ['PA', 'Pennsylvania'],
62 ['RI', 'Rhode Island'],
63 ['SC', 'South Carolina'],
64 ['SD', 'South Dakota'],
65 ['TN', 'Tennessee'],
66 ['TX', 'Texas'],
67 ['UT', 'Utah'],
68 ['VT', 'Vermont'],
69 ['VA', 'Virginia'],
70 ['WA', 'Washington'],
71 ['WV', 'West Virginia'],
72 ['WI', 'Wisconsin'],
73 ['WY', 'Wyoming']
74 ]
75 })
76 });
77
78 cm.setEditor(stIndex,new Ext.grid.GridEditor(cb));
79
80 }
81 </script>
82</head>
83
84<body>
85
86 <link href="/CFIDE/scripts/ajax/ext/resources/css/ytheme-aero.css" rel="stylesheet" type="text/css">
87
88 <cfquery name="getArtists" datasource="cfartgallery">
89 SELECT artistId, firstname, lastname, address, city, state, postalcode, email
90 FROM Artists
91 </cfquery>
92
93 <cfset args = structNew()>
94 <cfset args.name = "ArtistGrid">
95    <cfset args.width = 600>
96 <cfset args.format = "html">
97 <cfset args.query = "getArtists">
98 <cfset args.stripeRows = true>
99 <cfset args.selectColor = "##D9E8FB">
100 <cfset args.selectmode = "edit">
101 <cfset args.onchange = "cfc:artists.editArtist({cfgridaction},{cfgridrow},{cfgridchanged})">
102
103 <cfform>
104 <cfgrid attributeCollection="#args#">
105 <cfgridcolumn name="artistid" display="false">
106 <cfgridcolumn name="firstname" header="First Name">
107 <cfgridcolumn name="lastname" header="Last Name">
108 <cfgridcolumn name="address" header="Address">
109 <cfgridcolumn name="city" header="City">
110 <cfgridcolumn name="state" header="State">
111 <cfgridcolumn name="postalcode" header="Zip">
112 </cfgrid>
113 </cfform>
114
115 <cfset ajaxOnLoad("init")>
116</body>
117</html>
 

This entry was posted on March 12, 2008 at 5:35 PM and has received 14240 views. Comments 19 | Print this entry.