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>

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
[Home]