More quick bindings
Or "Why I love functions".
In my previous post, Quick grid bindings, I showed how to use a custom function, applyFilter, that I had described earlier.
Some readers asked how to change the first grid to a tree, then to a dropdown. Just because I like to be ahead of things, and to show how easy is to reuse a function once you have created it, I threw in a repeater with radio buttons as well.
All three controls, dropdown, tree and radio button group filter the same grid, but they could use different grids if you wanted them to (just change the reference to the grid, contactList). Notice that they all call the same function, but pass different parameters with respect to what the term to filter by should be.
<!--- departmentSelect.selectedItem.data --->
<cfselect name="departmentSelect" query="departmentsQuery" display="name" value="id" onchange="applyFilter(departmentSelect.selectedItem.data, contactList, ['department'])" queryposition="below">
<option value="">Department</option>
</cfselect>
<!--- departmentTree.selectedNode.getProperty('data').value --->
<cftree name="departmentTree" onchange="applyFilter(departmentTree.selectedNode.getProperty('data').value, contactList, ['department'])">
<cftreeitem display="name" query="departmentsQuery" value="id">
</cftree>
<!--- departmentOption.selectedData --->
<cfformgroup type="repeater" query="departmentsQuery">
<cfinput type="radio" name="departmentOption" value="{departmentsQuery.currentItem.id}" label="{departmentsQuery.currentItem.name}" onclick="applyFilter(departmentOption.selectedData, contactList, ['department'])">
</cfformgroup>
</cfformgroup>
<cfgrid name="contactList" query="contactsQuery" rowheaders="false">
<cfgridcolumn name="name" header="Employee Name">
<cfgridcolumn name="gender" header="Gender">
<cfgridcolumn name="age" header="Age">
</cfgrid>
Note: For those who have not followed previous posts, the above code is not complete, you need to add the applyFilter function code. Or download the source for the complete code.
Rick Smith
Bob
Chikowski
Michael White
Michael White
Michael White
Michael White
Nahuel
A quick solution could be adding some logic to the filter function.
You can add an && and check if the person starts with the letter "A" && is in deparment "C"
For example:
if(value.indexOf(filterTerm) != -1 && your_new_code_here)
{
filteredData.push(item);
added = true;
}
William
Instead of having the grid show ALL records, I need my grid to be empty until the user selects an option from the combobox.
I've tried calling an onload AS function with "mygrid.dataProvider = [];" in it, but it seems the grid is actually populated from my query AFTER the onload event.
Thanks in advance!
William
There is still a bit of lag time after selecting your first combobox choice during which the user's machine filters the list and the user sees everything. However, if your cfgrid list isn't too long it is hardly noticeable.
multipleselectboxesmemory
Laura
The answer to your question:
http://www.asfusion.com/blog/entry/knowing-when-the-cfform-data-arrives
Laura
The filter function saves the dataprovider the first time it is called assuming it will never change. If it does, then you will need to update the variable that holds it so that it gets the new data.
_global.unfilteredData['myGrid']
Michele
Thanks so much for all the great examples. I am new to all this and building an app based on the address book example. My edit form has some radio buttons with hard coded values and I cannot figure out how to bind them to the grid. This seems to be a common issue as I've found questions about this in other blogs but no answers. Any assistance is much appreciated.
Nahuel
You can add this code in the "onChange" event of your grid:
myRadio.selectedData = myGrid.selectedItem.YourColumnName;
Michele
Giovani
Laura
You can have a button with onclick="getURL('your page')", appending any data that the page needs (as long as it is short, since it is a get request)
There is no way to change the action page after the form is loaded.
Laura
It is not possible because the cfselect still contains only data and label, lacking all of the other columns.
However, you can use this technique (http://www.asfusion.com/blog/entry/knowing-when-the-cfform-data-arrives ) to load the cfselect data onload with remoting, and then you will have all the columns you need.
Michele
I love this filter function! It was so quick to implement and I did not have to modify the script at all. I'm trying to do something similar to Michael - I'm using 3 radio buttons to filter grid by active records, inactive records and all records. Active and Inactive options are working perfectly, but I cannot figure out how to assign Active AND Inactive as value for the All option. Is this possible?
Michele
Michele
Michael
Steve Walker
Steve Walker
myService.getEvents(cal.selectedDate);
will pass the date (Flex docs rock). Now I am having a heck of a time trying to bring back a list of events between a date range (+/- 7 days) from the date selected. Anybody done something like this?
Jan
I am pretty new to this all and just upgraded to MX7 (including the latste update). I used this code and several other examples and the flash forms do show up. But they never show any data, they remain empty ! That little clock is turning forever. I use simple cfquery statements and cfdump shows all data when I test on my win 2000 server. Any suggestions ?
Laura
That means you have a problem with your Flash Remoting installation. Check the last paragraph of this post for help on how to set it up:
http://www.asfusion.com/blog/entry/introduction-to-flash-remoting
Neil Huyton
Can you expand on the solution you gave Bob for applying the filter to a grid populated with remoting.
You said that you need to update the variable that holds the unfiltered data so that it gets the new data.
_global.unfilteredData['myGrid']
Does this need to be done on the onResult so:
_global.unfilteredData['myGrid'] = results;
Is this along the right track?
Thanks.
Laura
That's correct assuming the results contains a query. However, the filtering will not work if you just do _global.unfilteredData['myGrid'] = results;
Use
_global.unfilteredData['myGrid'] = results.items;
instead.
Michael White
Laura
indexOf() looks in any part of the string. You need to change it to an == condition
You should be able to find an example of that in the comments of the many filtering examples we have.
Ed Welch
Laura
Not directly. If I understand correctly what you want, you can see an example of that in the Real Estate sample app. That part specifically is explained in the article:
http://www.asfusion.com/blog/entry/coldfusion-flash-forms-macromedia-2
Brian
Pete
I need to take this to the next level; I would like to be able to filter on more than one row; for instance, assume a CFGRID with gender, first name, and last name. I would like to be able to first filter by gender using a SELECT, and then be able to filter on first name from a SELECT; so, if I select "Male" as the gender, and "Peter" as the first name, that should display just those males named Peter.
Is this difficult or even possible?
Michael White
Michael White
onclick="getURL('ContactMgr.cfm?ContactID={gridContact.selectedItem.ContactID},'_blank')" but it sends the literal string, not the value... help...
Michael White
I have a javascript routine to open the window:
<script>
function show(u) {
if(u != '') window.open(u, 'sub', 'directories=no, location=no, menubar=no, resizable=yes, scrollbars=no, status=no, titlebar=yes, toolbar=no, height=435, width=535')
}
</script>
Then I have a grid called "gridContact" and the ID for contacts is ContactID so the syntax for the onload event looks like this:
onclick="getURL('javascript:show(\'ContactProfile.cfm'+'?ContactID='+gridContact.selectedItem.ContactID+'\')')"
Ed Welch
onclick="if (queResults.selectedItem.id > 0 ) {getUrl('PrintForm.cfm?PQCProfileID=' + queResults.selectedItem.id,'_blank');}"
This will open a html page in another window...and it will make sure that the id is greater than zero first...
Michael White
ruliz
this is very awoseme stuff.
I'm very new to flash forms and this particular demo hit the spot on what I to do.
However, I downloaded the sample and try to just switch components to get the data from my database and now the application doesn't work.
I've got a table called departments and another divisions, from there I grouped the cftree to display department parent, division child.
On the value for the cftreeitem, I've changed the value to divID (instead of the id that was there).
My cfgrid is populated by my Employee table which is related to the division table by divID.
Any ideas on why this doesn't work?
Any suggestions?
Thanks in advanced.
SIMON
Laura
There is no comma-separated list you can use. They are in arrays.
Say you have a text input inside your repeater called "myTextInput", then you would get an array with the same name that contains each repeated text input. You would reference the contents like this:
myTextInput[i].text where i is an index, probably a loop index.
The same with checkboxes, but use .value (which will give you true/false), if you need something like an id, then you would get that from the repeater's dataProvider as in (id is a column of your query):
myRepeater.dataProvider[i].id
SIMON
Todd
Any ideas?
Thanks in advance
Laura
See the second paragraph of this post:
http://www.asfusion.com/blog/entry/filtering-a-grid-as-you-type---using
Eric
Laura
The real estate tutorial explains how to bind each control type, including textareas: http://www.adobe.com/devnet/coldfusion/articles/flashforms_pt2_03.html
Steve Willems
First of all thanks for this incredible source for information on power design with cfform.
I have a weird problem so I hopefully someone can give me a lead.
When I populate my grids with from the DB using the query attribute of cfgrid it's impossible afterwards to access the dataprovider's columns after a slice (or by manual copy in a loop) to a global object. It always return an empty result.
Now the strange thing is when I manually populate the rows using cfgridgrow with a loop it works fine. I can filter without problems.
But..when I use this techinque no information is passed to the action page (using a post)
<cfformitem type="script">
function populateGrid( destgrid:mx.controls.DataGrid, grid:mx.controls.DataGrid, filter:String ){
if(_global.unfilteredData == undefined){
_global.unfilteredData=[];
for(var i:Number = 0; i < grid.dataProvider.length; i++) {
_global.unfilteredData.push(grid.dataProvider.getItemAt(i));
}
}
var filteredData:Array = [];
for(var i = 0; i< _global.unfilteredData.length; i++) {
if( _global.unfilteredData[i].userid == filter || filter=='All'){
var a = filteredData.push(_global.unfilteredData[i]);
}
}
destgrid.removeAll();
destgrid.dataProvider = filteredData;
}
</cfformitem>
So I'm kinda stuck...anyone an idea what might be the cause ? A Bug ? Or just a problem with my code ?
Thanks for your help!
Steve
Oh yes...I'm running on a 7.0.1 server (but on our 7.0.2 test server I have the same problem)
Laura
I am not sure what the problem you are experiencing is. I don't think there should be a problem accessing the properties (columns) of the objects inside the array after a slice. However, most of these techniques make form "posts" fail, since we are manually changing things that do not call the methods that update the hidden inputs (by which the form knows what happened in flash)
Chris
I'm am new to this so forgive me if this question sounds ignorant. I have an app that is used for people to enter their project time for a given week. I have a repeater section with three text boxes and a combo box for each time entry for the given week. My question is - is it possible to dynamically add a new row to a repeater section without submitting back to the server (either through remoting or local array manipulation)?
Thanks in advance for the help,
Chris
Henam
How can I change the function ApplyFilter for filtering a single value, there is, if the value was somethingID=1 from a first grid, the second must return only the results that matches exactly with the number 1. When I use your function posted here, it will bring me 1, 11, 21, 31, etc, all results with number 1.
Henam
Tanks Again...
Maggie
This is what I'm using:
<cfquery name="statusQuery" datasource="#dsn#">
SELECT changestatusid, status, sortorder, active
FROM table
</cfquery>
<cfquery name="changeQuery" datasource="#dsn#">
SELECT table2.status, table1.changeid, table1.changetitle, changetype.changetype,
table1.changestatusid, table1.trackingnumber, table1.datesubmitted,
FROM table1
INNER JOIN table2
ON table1.changestatusid = table2.changestatusid
INNER JOIN table3
ON table1.changetypeid = table3.changetypeid
</cfquery>
<cfformgroup type="horizontal">
<cfformgroup type="vbox" width="200">
<cfselect name="statusSelect" query="statusQuery" display="status" value="changestatusid" onchange="applyFilter(statusSelect.selectedItem.data,changeList,['changestatusid'])" queryposition="below">
<option value="">Status</option>
</cfselect>
</cfformgroup>
<cfgrid name="changeList" query="changeQuery" rowheaders="false">
<cfgridcolumn name="status" header="Status">
<cfgridcolumn name="trackingnumber" header="Tracking Number">
<cfgridcolumn name="changetitle" header="Change Title">
<cfgridcolumn name="datesubmitted" header="Date Submitted">
</cfgrid>
</cfformgroup>
</cfformgroup>
Am I missing something terribly obvious??
Tad
Perhaps you can shed some light on this for me. I am very new to CF Flash Forms but would like to make use of them in one of our applications. I'd like to have a panel on the left use a list of radio buttons that apply to different maintenance tables. As a user selects one of the buttons, the top right preview panel would display all the columns in the table selected. Selecting one of the columns from the preview panel would then allow the user to edit or delete the information in a bottom right panel. A button would also be available in the bottom right panel to add a new value to that database table. Is this something that is doable? I've looked at your examples but cannot figure out how to code the radio buttons and applyFilter function to bring up the applicable database table. Also, is there an advantage of doing this with remoting services? I've looked at the Real Estate example and am trying to utilize this type of look and feel. Thanks for any help you can provide.
Scott
The cfgrid has a vendor and an invoice column? How do I set up the filter to bind by vendor if the user selects the top level and by invoice if the user selects the second level?
Scott
The cfgrid has a vendor and an invoice column? How do I set up the filter to bind by vendor if the user selects the top level and by invoice if the user selects the second level?
Kim
I am new to Coldfusion Flash forms. I'm trying to create a page similiar to the contacts page. I am populating a cfgrid from a CFC passing it 2 parameters. When a user selects a row from the grid I want to populate the panel on the right which I have set up as tab pages since there is a lot of detail data. I have this part working. My problem is with the cfgrid, the columns that I have to display can't be grouped so when I select a row I'm not gett all of the data displayed.
There is a primary key associated with row that is a seq. generated number in the database (PK), that I don't want displayed. The columns that I need to display are replicated ie.
Grid list:
PK(hidden) rec# col1 col2
1 120 ab abc
1 120 ab efg
1 120 df abd
2 121 ab gji
2 121 fg ere
Columns 1 and columns 2 are from separate tables joined via the PK where there is a many to one relationship.When I select rec# 120 I want to select all of the data associated with PK 1 which would include 3 rows.
I think I need to use the onChange event on the cfgrid using the PK to get the information from the database to be displayed in the tab pages, but I haven't been able figure this out. Do I need another query or can I requery the same query used in the cfgrid passing it the PK. I'm formatting the data in the <cfsavecontent> tag. Is there a way I can bind using the hidden column and pull all of the necessary data?
Any suggestions would be appreciated. Thanks
John Beasley
I was wondering if it is possible to bind two select boxes together. For example, I am working on a form that grabs all of the courses currently being taught in one select box, and based off of the selection of that box, another query will run to populate a second select box based on the value of the first. The second select box, shows the instructors that are currently teaching that course.
In essense, they are dynamix select boxes. I am pulling the data from an Oracle DB using 2 cfquery statements. Is there any way you can think of applying this bind technique easily to my situation?
Thank you so much and keep up the great work!
John Beasley
John Beasley
I was wondering if it is possible to bind two select boxes together. For example, I am working on a form that grabs all of the courses currently being taught in one select box, and based off of the selection of that box, another query will run to populate a second select box based on the value of the first. The second select box, shows the instructors that are currently teaching that course.
In essense, they are dynamix select boxes. I am pulling the data from an Oracle DB using 2 cfquery statements. Is there any way you can think of applying this bind technique easily to my situation?
Thank you so much and keep up the great work!
John Beasley
Garcia
What im trying to do is when a user selects a row in the first grid an click on the add button, i want that the data of the row be passed to the other grid.
any help wil be apreciated
Garcia
What im trying to do is when a user selects a row in the first grid an click on the add button, i want that the data of the row be passed to the other grid.
any help wil be apreciated
Scott