919 - 926 - 9847

Bind CFGrid updates to a form field

I searched for a fairly good amount of time before figuring this out.  The background is this.

I don't usually have much use for CFGrid, at least not since the CF 4.x days.  That being said, I found myself in need of it this week for a project which I've been assigned to.  The grid was pulling data back correctly, but what it really needed to do was refresh when you select value XX from a select box.  The answer turned out to be pretty simple.  First, the form.

 


<html>
<head><title>test me</title></head>
<body>

<!--- You MUST use a CFFORM here --->
<cfform name="myProds" action="" method="post">

<!--- Our select box --->
<select name="product" id="product" class="datasectiontextlong">
    <option value="0">--Select a product--</option>
    <option value="1">Product 1</option>
    <option value="2">Product 2</option>
</select>

<!--- Our grid (notice the select box value here) --->
<cfgrid format="html"
    name="products"
    pagesize="7"
    height="200"
    width="550"
    bind="cfc:myCFC.getProds({myProds:product},{cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"
>

    <cfgridcolumn name="ID"/>
    <cfgridcolumn name="display" header="Your Choice">
</cfgrid>

</cfform>
</body>
</html>

And the CFC

 


<cfcomponent name="myCFC" displayname="You can't touch this" output="false" >
    <!--- We use some dummy data in this instance --->
    <cffunction name="getProds" access="remote" returntype="struct">
    <cfargument name="productID" required="true" type="numeric" />
        <cfargument name="page" type="numeric" required="yes">
<cfargument name="pageSize" type="numeric" required="yes">
<cfargument name="gridsortcolumn" type="string" required="no" default="">
<cfargument name="gridsortdir" type="string" required="no" default="">
        
        <cfscript>
    var selectQuery = QueryNew("ID,display");
            var tmp=queryaddrow(selectQuery,2);
            tmp=querysetcell(selectQuery,'ID','1',1);
            tmp=querysetcell(selectQuery,'ID','2',2);
            tmp=querysetcell(selectQuery,'display','You chose wisely',1);
            tmp=querysetcell(selectQuery,'display','You chose poorly',2);
        
</cfscript>
        <cfquery name="returnQuery" dbtype="query">
            select ID,display
            from selectQuery
            where ID = <cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.productID#">
        </cfquery>
<cfreturn QueryConvertForGrid(returnQuery,
arguments.page,
arguments.pageSize)>

    </cffunction>
    
</cfcomponent>

The missing piece (for me) was that first bit in the CFGrid CFC call.  myProds.product.  If you tell the grid to pass this as a variable into the CFC function, you can then pass that into your select statement.  I presume this holds true for any form field and not just select boxes. 

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