thecfguy

A Unique Developer

Bind ExtJs header element with CFGRID result.

Before a month I have posted about "Add header in cfgrid in coldfusion 9" where you can add ExtJs component in header to filter CFGRID data. One of my blog read "David" raise that how to bind ExtJs component with CFGRID to filter result.
Here I will try to explain how to bind header element with CFGRID, assuming that you have already read my previous post regarding this topic.
This is little bit tricky to bind with CFC call. We need to create seperate javascript function which will return value selected from extJS element.[googlead]single_line[/googlead]

In my case I have modifed my CFC to filter artist by state and added state dropdown in CFGRID header.

function getStateValue()            {                try                {                        return Ext.ComponentMgr.get('cmbstate').value;                }                catch (e)                {                    return "";  //return default value in case of error.                }            }

getStateValue() function will return selected state value from dropdown. You have to put this code in try catch as first grid load browser will not find cmbstate dropdown as it is not created yet. Now you need to bind this function with cfgrid bind attributes.

<cfform>            <cfgrid format="html" name="artGrid" pagesize="10" selectmode="row"                bind="cfc:art.getArtists({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection},getStateValue())">                <cfgridcolumn name="ARTISTID" display="No"/>                <cfgridcolumn name="FIRSTNAME" header="FIRSTNAME" >                <cfgridcolumn name="LASTNAME" header="LASTNAME" >                <cfgridcolumn name="CITY" header="CITY" >                <cfgridcolumn name="STATE" header="STATE" >            </cfgrid>        </cfform>

If you want to pass argument in this javascript function then it will let you single numeric argument only. CFGRID ultimatly creating javascript code which cause issue if you pass multiple argument or string value in it.
Output without filter:

cfgrid output
After filtering by state
cfgrid output 2
Hope this help you...