Bind a grid to select list
There are a number of examples of binding a grid column to a text field, but binding a grid column to a select list is a little trickier. The problem is that a number of components contain the bind attribute, however, the select list does not. To select an item in a select list you need to find the item you want and tell the component to select that row.
To bind a select list to a grid, you need to loop over all of the items in the select list comparing them to the value you want selected. We will do this in the onChange="" attribute of cfgrid and a for loop in actionscript.
<cfscript>
qNames = queryNew("id,firstname,lastname,city,state,zip");
queryAddRow(qNames);
querySetCell(qNames, "id", "1");
querySetCell(qNames, "firstname", "Mike");
querySetCell(qNames, "lastname", "Nimer");
querySetCell(qNames, "city", "Boston");
querySetCell(qNames, "state", "MA");
querySetCell(qNames, "zip", "O2127");
queryAddRow(qNames);
querySetCell(qNames, "id", "1");
querySetCell(qNames, "firstname", "Bob");
querySetCell(qNames, "lastname", "Jones");
querySetCell(qNames, "city", "Salt Lake City");
querySetCell(qNames, "state", "UT");
querySetCell(qNames, "zip", "84111");
queryAddRow(qNames);
querySetCell(qNames, "id", "3");
querySetCell(qNames, "firstname", "Chris");
querySetCell(qNames, "lastname", "Smith");
querySetCell(qNames, "city", "Las Vegas");
querySetCell(qNames, "state", "NV");
querySetCell(qNames, "zip", "55555");
queryAddRow(qNames);
querySetCell(qNames, "id", "4");
querySetCell(qNames, "firstname", "Susan");
querySetCell(qNames, "lastname", "McFoo");
querySetCell(qNames, "city", "Boston");
querySetCell(qNames, "state", "MA");
querySetCell(qNames, "zip", "02466");
</cfscript>
<cfform format="Flash">
<cfgrid name="UsersGrid" format="Flash"
query="qNames" maxRows="5" rowheaders="No"
onchange="for (var i:Number = 0; i<state.length; i++) {if (state.getItemAt([i]).data == UsersGrid.selectedItem.state) state.selectedIndex = i}">
<cfgridcolumn name="id">
<cfgridcolumn name="firstname" header="First Name">
<cfgridcolumn name="lastname" header="Last Name">
<cfgridcolumn name="city" header="city">
<cfgridcolumn name="state" header="state">
</cfgrid>
<cfinput type="text" name="firstname" label="First Name"
bind="{UsersGrid.dataProvider[UsersGrid.selectedIndex]['firstname']}"
onChange="UsersGrid.dataProvider.editField(UsersGrid.selectedIndex, 'firstname', firstname.text);">
<cfinput type="text" name="lastname" label="Last Name"
bind="{UsersGrid.dataProvider[UsersGrid.selectedIndex]['lastname']}"
onChange="UsersGrid.dataProvider.editField(UsersGrid.selectedIndex, 'lastname', lastname.text);">
<cfselect name="state" width="200" size="1" label="State" onchange="UsersGrid.dataProvider.editField(UsersGrid.selectedIndex, 'state', state.selectedItem.data);">
<option value="MA">Boston</option>
<option value="CA">California</option>
<option value="NV">Las Vegas</option>
<option value="UT">Salt Lake City</option>
</cfselect>
<cfformgroup type="horizontal">
<cfinput type="Submit" name="submitBtn" value="Save">
</cfformgroup>
</cfform>
There are no comments for this entry.
[Add Comment] [Subscribe to Comments]