EnterKey in cfgrid

Question

I have the search form with three fields: city, state, and enter date.  The results are displayed in the cfgrid.  Currently, when i enter search criteria, i have to use the tab kep to refresh the data from the cfgird's results.  Instead of using the tab key, i need to use the enter key.  I don't know if i have the correct way but the code i have below didn't work because more arguments from cfgrid than cfc(i have extra the getSearchString () from cfgrid)
can you help with this?
Thanks
<!---my cfc-->
<cffunction name ="cf_city" access="remote" returnpe="struct">
     <cfargument name ="page" required="true" />
     <cfargument name = "pageSize" required="true" />
     <cfargument name ="gridsortcolumn" required="true" />
     <cfargument name ="gridsortdirection required="true" />
     <cfargument name="city" required="true" type="string" />
     <cfargument name ="state" required="true" type="string" />
     <cfargument name ="date" required="true" type="date" />
</cffunction>
<!---my form.cfm--->
<cfform name="search" action="##" method="post" onsubmit ="ColdFusion.Grid.refresh("myGrid", false);">
<cfinput type="text" name="city" id="city">
<cfinput type="text" name="state" id="state">
<cfinput type="datefield" name="date" id="date">
</cfform>
<!---scrpt function--->
<script>
  getSearchString = function() {
   var s ={};
     s.city=ColdFusion.getElementValue("city");
     s.state=ColdFusion.getElementValue("state");
     s.date= ColdFusion.getElementValue("date");
return s;
</script>
<!---diplay on the cfgrid--->
<cfgrid
     name="myGrid"
     format="HTML"
     title="search result"
     selectMode="Single"
     pagesize= "20"
     bindOnLoad ="true"
    bind = "cfc.myapp.cfc.filter.cfc_city ({cfridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection},getSearchString(), {city},{state};{date})">
     <cfgridcolumn name="city" header="city">
     <cfgridcolumn name="state" header="state">
</cfgrid>
thanks

Answer 1

kt03 wrote:
I have the search form with three fields: city, state, and enter date.  The results are displayed in the cfgrid.  Currently, when i enter search criteria, i have to use the tab kep to refresh the data from the cfgird's results.  Instead of using the tab key, i need to use the enter key.  I don't know if i have the correct way but the code i have below didn't work because more arguments from cfgrid than cfc(i have extra the getSearchString () from cfgrid)
can you help with this?
Thanks
<!---my cfc-->
<cffunction name ="cf_city" access="remote" returnpe="struct">
     <cfargument name ="page" required="true" />
     <cfargument name = "pageSize" required="true" />
     <cfargument name ="gridsortcolumn" required="true" />
     <cfargument name ="gridsortdirection required="true" />
     <cfargument name="city" required="true" type="string" />
     <cfargument name ="state" required="true" type="string" />
     <cfargument name ="date" required="true" type="date" />
</cffunction>
Suggestions:
<cfcomponent>
<cffunction name ="cf_city" access="remote" returnpe="struct">
<cfargument name ="page" required="true" />
<cfargument name = "pageSize" required="true" />
<cfargument name ="gridsortcolumn" required="true" />
<cfargument name ="gridsortdirection" required="true" />
<cfargument name="city" required="true" type="string" />
<cfargument name ="state" required="true" type="string" />
<cfargument name ="date" required="true" type="date" />    
<!--- return at least an empty query to avoid errors,  enabling you to test --->
<cfset var myQuery = querynew("")>    
<cfreturn queryconvertforgrid(myQuery, page, pagesize) />
</cffunction>
</cfcomponent>
<!---my form.cfm--->
<cfform name="search" action="##" method="post" onsubmit ="ColdFusion.Grid.refresh("myGrid", false);">
<cfinput type="text" name="city" id="city">
<cfinput type="text" name="state" id="state">
<cfinput type="datefield" name="date" id="date">
</cfform>
<!---scrpt function--->
<script>
  getSearchString = function() {
   var s ={};
     s.city=ColdFusion.getElementValue("city");
     s.state=ColdFusion.getElementValue("state");
     s.date= ColdFusion.getElementValue("date");
return s;
</script>
<!---diplay on the cfgrid--->
<cfgrid
     name="myGrid"
     format="HTML"
     title="search result"
     selectMode="Single"
     pagesize= "20"
     bindOnLoad ="true"
    bind = "cfc.myapp.cfc.filter.cfc_city ({cfridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection },getSearchString(),{city},{state};{date})">
     <cfgridcolumn name="city" header="city">
     <cfgridcolumn name="state" header="state">
</cfgrid>
Suggestions:
1) Place the closing form tag </cfform> after the grid.
2) Give the datefield a default value.
3) Begin the bind expression with "cfc:", not "cfc.".
4) Correct the spelling of the name of the function in the bind. It is "cf_city", not "cfc_city".
5) Remove getSearchString() from the arguments list in the bind.
6) Replace the semicolon in {state};{date} with a comma.
The result should be something like
<cfform name="search" action="##" method="post" onsubmit ="ColdFusion.Grid.refresh('myGrid', false);">
    <cfinput type="text" name="city" id="city">
    <cfinput type="text" name="state" id="state">
    <cfinput type="datefield" name="date" id="date" value="#now()#">
    <cfgrid
         name="myGrid"
         format="HTML"
         title="search result"
         selectMode="Single"
         pagesize= "20"
         bindOnLoad ="true"
         bind = "cfc:myapp.cfc.filter.cf_city({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsor tdirection},{city},{state},{date})">
         <cfgridcolumn name="city" header="city">
         <cfgridcolumn name="state" header="state">
    </cfgrid>
</cfform>