AsFusion

this line fails when there are spaces in items in your grid (also on a number):

if(item[selected].substr(0,fortext.length).toLowerCase() == fortext)

if you replace it with this it works:

if(_global.arrMembers == undefined) _global.arrMembers = FileGrid.dataProvider.slice(0);
    var arrMembers = _global.arrMembers;
    var arrDisplay:Array = [];
    var fortext = forInput.text;
    var selected = column.selectedItem.data;
   
    for(var i = 0; i < arrMembers.length; i++)
    {
      
       if(selected == 'NumberColumn')
       {
          if(arrMembers[i][selected].toString().indexOf(fortext) != -1)
          {
             arrDisplay.push(arrMembers[i]);
          }
       }
       else{
      
          if(arrMembers[i][selected].toLowerCase().indexOf(fortext.toLowerCase()) != -1)
          {
             arrDisplay.push(arrMembers[i]);
          }
       }
      
    }
    FileGrid.dataProvider = arrDisplay;

change this line:

if(item[selected].substr(0,fortext.length).toLowerCase() == fortext)

to:

if(arrMembers[i][selected].toLowerCase().indexOf(fortext) != -1)

How do you validate data in cfgrid, ie. dates, expressions etc.

I would like to maintain the Flash Form look and feel throughout my ColdFusion Application and give users some cool features too. I would like to use CFGRID to allow a user to preview report data (say a list of orders) and either Export the list to excel/plain text or jump the the record details edit page (if they have rights). to make a long story short, what's the easiest way to link to another form from a data grid?

I got the answer from Laura on the original posting of Filter as you type http://www.asfusion.com/blog/entry/filtering-a-list-as-you-type-cfform-flash.
added .toString() between the ...[selected] and .substr...
Thanks so much.

Laura, using the added .toString() worked! Thanks so much.

I am currently using the filter grid with the query getArtists (shown below).
Now I want to get more data from another datasource and table.
I can not get query of query to work. This cfoutput shows all the data I need.
Can someone help me put this into a cfquery so I can use that query in the filter?

<cfquery name="getArtists" datasource="docpers">
SELECT UserName, FirstName, LastName, WorkPhone, Division, Status
FROM tblmaster
WHERE status <> 'I'
ORDER BY UserName
</cfquery>

<cfoutput query="getArtists">
<cfquery name="getsiteinfo" datasource="Site">
SELECT *
FROM site
Where username = '#getArtists.UserName#'

</cfquery>
#getArtists.UserName#, #getArtists.FirstName#, #getArtists.LastName#, #getArtists.Division#, #getsiteinfo.site#, #getsiteinfo.location#<<br>
</cfoutput>

Thanks for any help.

is there a way to do this with FLEX

thanks Laura, I modified the example today and got it to work using remoting like you suggested. I will try and post my actionscript tomorrow. thanks for the help :)

David

I haven't been able to get cfgridupdate to work with anything. Since you have an editable grid with a flashremoting link, how would I use cfgridupdate with this?

Thanks

When I populate with flash remoting this stops working.

Specifically this line right here:
_global.backupDP = myGrid.dataProvider.slice(0);

doesn't work when the dataProvider was populated with remoting.

Why does life hate me?
Pleas tell me there is another way around this. If I get rid of the slice(0) it copies the list over but it copies by REFERENCE not by VALUE. I can't find anywhere a source that tells me what syntax would force AS to make a backup of the dataProvider by duplicating the list in memory.

Laura -

This is some great stuff. I'm using this to try to put together a three-level filtering system. There are three cfgrids. Selecting an item in the first one filters the second cfgrid, selecting an item in the second cfgrid filters the third cfgrid.

I was able to modify an 'actionFilter' and an 'actionFilter2' with little problem. Change all the appropriate cfgrid references, and use _global.backupDP2 instead of _global.backupDP.

In addition, however, there are SO MANY items in the third cfgrid, and they don't really make sense unless you've selected something from the second cfgrid, that it really needs to be hidden until something is chosen in actionFilter2.

My solution (I thought) was simple. Give the following propety to the cfformgroup that holds the third cfgrid.

visible="{((_global.myShowbox)?true:false)}"

In addition, make a cfsavecontent called 'actionLoad' which loads upon onLoad which looks like this:

_global.myShowbox = 0;

In actionFilter, which is called when clicking on the first cfgrid, add the same line before any of the rest of the code. In actionFilter2, which is called when clicking on the second cfgrid, use this code before anything else:

_global.myShowbox = 1;

Theoretically, this would make a variable that would toggle the visibility of the third cfgrid and its assorted controls. It would be invisible when first loading, or when selecting something from the first cfgrid, and it would become visible when making a selection from the second cfgrid.

It didn't work.

Not only does it not toggle visibility states, but it also stops ActionFilter from working at all. ActionFilter now removes everything from the second cfgrid, but does not repopulate it with any data.

What did I do wrong?

Thank you in advance for your help. Your site is one of my favorite coldfusion sites, right after the livedocs themselves.

Macromedia LiveDocs system says you can use:
<cfgridcolumn name = "FirstName" textColor = "(CX EQ Peter ? blue : black)">

I can not get this to work. Has anyone tried this? I would like combine two grids if possible but I really need to identify which listing is vendor and which are employees. I thought this would be very useful. Thanks for all your help.

I have changed the filter code to that of the revisted. However, I still get an empty grid when the form arrives at the processing page. Any help greatly appreciated.

I have a cfgrid where the filtering works. One of the columns on the grid is a check box. After the user submits the form I process the rows for which the check box was changed by looping through the array form.mygrid.rowstatus.action. This array is the proper size and the code works when I do not type anything to filter the grid. If I filter the grid and change one or more rows the array form.mygrid.rowstatus.action contains 0 elements.

I'm wondering if it has something to do with pass by value/reference situation.

Here is the code that I used for filtering the grid.

function applyFilter(grid:mx.controls.DataGrid):Void{
    var arrDisplay:Array = [];
   
    var fortext = name.text.toLowerCase();
    var isApplicable:Boolean = true;
   
      
   if(_global.arrMembers == undefined) _global.arrMembers = userGrd.dataProvider.slice(0);
       var arrMembers = _global.arrMembers;
   
    for(var i = 0; i < arrMembers.length; i++){
         
         //Filter on the text
         if (fortext.length > 0){
            isApplicable = filterText(fortext,i,arrMembers[i].first_nm.toString(),arrMembers[i].last_nm.toString(),arrMembers[i].org_nm.toString(),arrMembers[i].user_nm.toString());
         }
         else{
            isApplicable = true;
         }
      
         
         
      
         if (isApplicable == true){
      
            arrDisplay.push(arrMembers[i]);
            isApplicable = true;
         }
         
      }
      
      userGrd.dataProvider = arrDisplay;
}
   
///filter for text
function filterText(fortext:String, i:Number, first:String, last:String,org:String, user:String):Boolean{
      var isApplicable:Boolean;
      
      if ((first.substr(0,fortext.length).toLowerCase() == fortext || last.substr(0,fortext.length).toLowerCase() == fortext || org.substr(0,fortext.length).toLowerCase() == fortext|| user.substr(0,fortext.length).toLowerCase() == fortext) ){
         isApplicable = true;
      }
      return isApplicable;
   }

I will post this in the other sections as well involving filtering a grid. If you are not using remoting and do not have an editable grid so to speak, if you run a cfgridupdate it will fail saying that it can not find the grid named XXXX.

This is only once you have filtered the grid. If you do not filter the grid then it will work. So at what point does this rename the grid? How can you keep the same grid name?

I update the grid via a cfinput that is bound to the selectedIndex of the grid and then have a button with onclick to:
gridname.dataProvider.editField(gridname.selectedIndex, 'COLUMN', textname.text);

This works great and the cfgridupdate works great even when you filter the grid, but once you filter the grid, you can not run the cfgridupdate.

I hope this makes sense.

Very good site. You are doing a great job. Please keep it up!

This is a more efficient and much quicker way of filtering while you type. You can basically use the old school remoting tactics. Well here goes….

file: filter.cfm

<cfsilent>
<cfsavecontent variable="onLoad">
   _global.loaded = true;
   <cfoutput>
      <!---create connection--->
      var connection:mx.remoting.Connection = mx.remoting.NetServices.createGatewayConnection("http://#cgi.HTTP_HOST#/flashservices/gateway";);
      <!---declare service--->
      var netService:mx.remoting.NetServiceProxy;
      <!---declare component--->
      var epmComp = "xEPM.authenticated.components.empCFC";
   </cfoutput>

   <!--- includes actionscript file for form --->
   #include "actionscript/as_dataManagement.as"
</cfsavecontent>
</cfsilent>


<cfform format="flash" name="empForm" wmode="transparent" onload="#onLoad#" style="#formStyle#" preservedata="yes" >
<cfformgroup type="horizontal" style="marginTop:0; horizontalGap:15;marginRight:15;horizontalAlign:right">
                  <cfinput type="text" name="filterProjectInput" size="12" label="Filter: " onChange="_global.findProject({})" enabled="{gridCustomer.selectedItem != undefined}"/>
               </cfformgroup>
</cfform>

file: as_dataManagement.as

_global.findProject = function():Void {
   //fields are passed to component as a variable
   var Parameter = {};
   Parameter.filterText = _root.filterProjectInput.text.toLowerCase();
   mx.managers.CursorManager.setBusyCursor();
   Parameter.onStatus = function( stat: Object ):Void {
      //if there is any error, show an alert
      alert("Error while calling cfc:" + stat.description);
   }
   
   //get service
   netService = connection.getService(epmComp, Parameter);
   
   //find data with remoting
   netService.findProject(Parameter);
   
   //put the controls in scope to avoid calling _root
   var gridProject = _root.gridProject;
   
   Parameter.onResult = function( results: Object ):Void {
      //when results are back, populate the cfgrid
      gridProject.dataProvider = results;
      mx.managers.CursorManager.removeAllCursors();
   }
}

file: epmCFC.cfc

<cffunction access="remote" name="findProject" output="false" returntype="Any">
      <cfargument name="filterText" type="Any" required="yes">
      
         <cfquery name="findProject" datasource="#session.datasource#">
            SELECT *
            FROM PROJECTS
            WHERE projectName LIKE <cfqueryparam cfsqltype="cf_sql_varchar" value="%#lcase(arguments.filterText)#%">
         </cfquery>
         <cfreturn findProject/>
   </cffunction>

Not to crack on the post there, but remoting for filtering is a poor idea. Every letter typed is making a call to the database....why??? All of the data has already been stored in the grid. Making a copy of that data and placing it in an array is much faster, convenient, less network traffic, as well as better performance on the page by memory management. I would highly NOT recommend do a remoting call just to filter a grid.

Is there any way to the above example with an xml form instead of a flash form. I have gotten the above example to work perfectly however when you are dealing with large datasets say over 200 records the form takes 25 seconds to load. If I change the format of the form to xml instead of flash it the grid loads in 2 seconds. The filter functions no longer work of course.