CheckBoxes in a cfgrid
116 comments Posted by: NahuelThis is an old example that we made for a presentation that we gave to the Michigan user group. It shows how to check and uncheck checkBoxes in a cfgrid. Once you have a least one item checked, you can remove it from the grid. A confirmation pops up before the action gets executed just in case. Then you need to submit the form to see the results.
<cfsavecontent variable="actionRemove">
var contactList = contactList;
var console = console;
var confirm = function (evt)
{
if (evt.detail == mx.controls.Alert.OK)
{
for(var i:Number = contactList.length-1; i >= 0; i--)
{
var item:Object = contactList.dataProvider[i];
if(item.checked.toString() == "true")
{
contactList.selectedIndex = i;
GridData.deleteRow(contactList);
}
}
}
}
alert("Are you sure you want to remove the checked records?", "Warning",
mx.controls.Alert.OK | mx.controls.Alert.CANCEL, confirm);
</cfsavecontent>
<cfsavecontent variable="selectToggle">
if(selectBtn.label == "Check all")
{
for(var i:Number = 0; i < contactList.length; i++)
{
contactList.editField(i, "checked", "true");
}
selectBtn.label = "Uncheck all";
}
else if(selectBtn.label == "Uncheck all")
{
for(var i:Number = 0; i < contactList.length; i++)
{
contactList.editField(i, "checked", "false");
}
selectBtn.label = "Check all";
}
</cfsavecontent>
<cfdump var="#form#">
<cfform name="addressBook" format="flash" width="410" height="310">
<cfformgroup type="panel" label="Contacts">
<!--- grid with contact names and email addresses --->
<cfgrid name="contactList" query="contactsQuery" height="220" rowheaders="false"
selectmode="edit">
<cfgridcolumn name="checked" header="Delete" type="boolean" width="46"/>
<cfgridcolumn name="firstName" header="First Name" />
<cfgridcolumn name="lastName" header="Last Name" />
<cfgridcolumn name="email" header="Email" />
</cfgrid>
<cfformgroup type="horizontal">
<cfinput type="button" name="addContact" value="Add" onClick="GridData.insertRow(contactList);"/>
<cfinput type="button" name="removeContact" value="Remove Checked" onClick="#actionRemove#"/>
<cfinput type="button" name="selectBtn" width="90" value="Check all" onClick="#selectToggle#"/>
<cfinput type="submit" name="submitBtn" value="Submit"/>
</cfformgroup>
</cfformgroup>
</cfform>
View live example
Download the source
116 Comments so far
Write yoursforgive my ignorance but is there anyway around needing a query datatype for cfgrid (or even cfchart)?
<cfgrid name="contactList" query="contactsQuery"
why? we use arrays of structs because of flash remoting and also because all of our data has to be manipulated before conversion (we can't use the origional query - eg: every text field has to be at least rTrim'ed, dates formatted to ISO standard etc before leaving the model layer).
it works fine like that and we can swap out flash with dhtml view layers if needed.
is there no other way apart from converting the array'o'structs back to a query? the double conversion seems a shame...
thanks
Thank you for you prompt response. I have just one question. The cfdump is an array of the grid changes, with that I want to pass the array as (args) to _global.updateTimesheet = function(args:Object){
my code here?
}
I have not been able to get the code correct to pass to a cfc (may I ask what would it look like?). I not sure what argument must be set in my cffunction. I have done this without flash remoting to a cfc by means of a submit as per your example (using a cfargument name="formdata" as type="struct", then loop over the struct as per the CF7 docs examples.
Kind Regards
Wayne
you can use cfgridrow instead of the query attribute. Just loop over the query outputting one cfgridrow for each row in the query (with all of your data tweaked the way you like it).
a couple/three questions:
- why are you peeling the row off the grid dataprovider (var item:Object = contactList.dataProvider[i];)? any benefit to doing it that way?
- any reason why you're going thru the grid in reverse order?
- i used your code as a model bit i'm seeing cases where GridData.deleteRow(contactList); isn't clearing all the selected rows. any ideas?
thanks again, i check this blog at least once a day, great stuff.
- why are you peeling the row off the grid dataprovider, any benefit to doing it that way?
No, You can either do this or getItemAt. I use both.
- any reason why you're going thru the grid in reverse order?
Yes, if you go forward, you will find that some items don't get removed. Why? Because if you have, for example, the third and four item checked, when you remove the third, the fourth takes the place of the third but your i now is 4, so you'd never reach the fourth item in your loop.
- i used your code as a model bit i'm seeing cases where GridData.deleteRow(contactList); isn't clearing all the selected rows. any ideas?
No, try to track it down and send me how to reproduce the behavior and I will check it
-i check this blog at least once a day, great stuff.
Cool :)
Please would you show the correct code to loop the grid to remove the selected rows. The source code is not working.
If I may; could I see the code for a reverse loop(ascending) and then (descending)
Would really appreciate it thanx
<cfgridcolumn name="invoiceNum" header="Select" type="boolean" width="50" />
This doesn't work, of course.
The data comes from a query, so not certain how to have it selected for submission.
Ideas?
How does the items checked get remove from the database?
I tryed using your code and my table with my db, I can add/remove items but when I click Submit the record remains in the database without getting updated.
Would really appreciate it.
Muchas Gracias.
When you run the example, and submit the form, you will see that there are several variables in the form scope that tell you what has been added, what has been edited and what has been deleted. It is your job to go through each array and remove what it needs to be removed, the same for update, and insert.
If you deleted something, you will see:
CONTACTLIST.ROWSTATUS.ACTION with an array containing a D (for deleted), those must be deleted. Otherwise you will see I for inserted, and U for updated, with the new and old value.
Hope that helps
1. I want to populate a cfgrid with a query.
2. I want to be able to select a row with a check box.
3. If a check box is selected I want a hidden field to be submitted along with the data in the row.
This is a great example, but it doesn't quite fit this senerio.
Thanks for your reply, forgive my ignorance but I'm lost.
-It is your job to go through each array and remove what it needs to be removed, the same for update, and insert.
Do I need to do this within the cfsavecontent tag or I need to loop over to delete the selected rows???
Can you direct me to a sample code on how to delete the rows from the DB after submitting from cfgrid. I tried cfgridupdate but is not working with the flash form cfgrid.
Thank you guys again for sharing your talent/ideas with the rest of us.
What a no brainer.
Depending on your database, you usually can also do
SELECT *, checked='false'
FROM yourTable
If you don't want to polute your database and queries with the view needs, you could also use
QueryAddColumn(contactsQuery, "checked", "bit", arraynew(1));
at the top of the page after you get your regular query. I think that would be the cleanest method.
Is there a way to automatically select the first item in a CFGRID after it loads?
I get the alert message, but the row selected is not removed and the delete box remains checked. If I hit Submit, the rowstatus is a U.
Any ideas? What obvious issue am I missing?
Thanks,
Steve
Sorry about that. The source in the zip had a small mistake. Wonder why nobody caught it before.
I already uploaded the one that works. The only change is in
contactList.editField(i, "checked", true);
to
contactList.editField(i, "checked", "true");
and the same for false.
Thanks for the response.
I probably was the first to notice since I'm a real putz when it coomes to noticing scripting errors.
Works fine now.
Steve
Donwload the 2 files, put them in the same dir, but the lame thing gives an error: can't find component contacts.
I do not have the time to debug someone else's code.
This problem happens frequently,
Why is it so hard to post working examples?
Joske, perhaps you should refrain from complaining. This is by far one of the best forums on the net. It has helped me tremendously.
How to get the grid row recordCount in AS?
I'm trying to limit the row that we insert into the grid using AS. So that the add button will turn off when the grid row reaches x number.
Check for myGrid.dataProvider.length
(where myGrid is the name of your grid)
Thanks Laura!
<!--- Actionscript routine to Select/Deselect All --->
<cfsavecontent variable="selectToggle">
if(selectBtn.label == "Check all")
{
for(var i:Number = 0; i < gridTimecard.length; i++)
{
gridTimecard.editField(i, "Invoiced", true);
}
selectBtn.label = "Uncheck all";
}
else if(selectBtn.label == "Uncheck all")
{
for(var i:Number = 0; i < gridTimecard.length; i++)
{
gridTimecard.editField(i, "Invoiced", false);
}
selectBtn.label = "Check all";
}
</cfsavecontent>
I have a grid with 26 columns (only half are visible) so I can pass them all to a processing page to enter them into another table.
I have already updated my home server to 7.01, What can I do to speed this routine up when I get over a hundred timecards?
I'm thinking that the problem comes from the amount of columns that you have. Having 26 columns may slow down the datagrid.
Instead to put half of them visible false you can try to don't put them at all, or just put 4 or 6. If the speed is the same we know that is number of columns. is not the problem.
BTW the code is very simple and I don't know how we can optimize it more.
<cfinput name="Status" label="Status" type="checkbox" bind="{myGrid.selectedItem.Status}"
onchange="myGrid.dataProvider.editField(myGrid.selectedIndex, 'Status', Status.selected);">
I tried this but it couldn't work, any idea?
I have a question though, when my data is filtered and then selected, the form doesnt pass any data. but when its not filtered, the data is passed. I combined your filtering and checkbox actionscripts.
Thanks so much for any ideas!
You can try this code:
<cfinput name="Status" label="Status" type="checkbox" value="{(myGrid.selectedItem.checked.toString() == 'true')}"
onclick="myGrid.dataProvider.editField(myGrid.selectedIndex, 'Status', Status.selected);">
Joe,
You need to use this code if you want to maintain the changes:
http://www.asfusion.com/blog/entry/filtering-a-cfgrid-as-you-type--revisited-
you can use functions as described in
http://www.asfusion.com/blog/entry/filtering-a-grid-as-you-type---using
I assume this is due the massive for loop that is running (with 500 rows), but does anyone know of any fix for this or way around it?
I want to have a constantly changing number in my form based on how many items are checked in my grid. I noticed there was no onchange for cfgridcolumn, and the onchange for cfgrid won't actually run a script if i'm just clicking checkboxes (i have to actually click on another part of the row for "onchange" to work). Does anyone have any suggestions?
You need to use this technique to avoid the warning:
http://www.asfusion.com/blog/entry/looping-over-the-records-of-a-large-cfgrid
regarding your second question, there a workaround, but it is a little complex to post here. I will try to make an example soon.
I tested it here: http://www.asfusion.com/blog/examples/item/checkboxes-in-a-cfgrid
and I don't see any problem. Do you do anything else besides checking and unchecking?
I know that if you have a cfgrid that is editable you can mark certian colums as not editable with select="no".
Is there a way to do this for certian rows.
Certian record can only be changed by certain users.
Thanks in advance
John
Which are not defined in the db and hence generate faults.
The cfinsert is working fine, no strange happenings. You could check the page out and try an update. http://62.194.144.168/birdz/step8.cfm the dump is still on this page.
Does any of you have a clue how to work around these variables ? They are getting on my nerves
:-).
thnx.
Jan (Netherlands)
I can't really help you because I never use cfupdate/cfinsert. I don't recommend their use because you have no control on what goes on.
Melissa,
The simple answer, not it is not possible unless you use hacks.
Sami,
I would loop over the items like in the example checking if there is any true, stopping when I found one. If after looping I couldn't find anything, I would show an alert.
Thanks in advance,
Ed
It's just a query:
<cffunction name="getAll" output="false" access="public" returntype="query">
<cfset var allcontacts = "" />
<cfquery name="allcontacts" datasource="yourDatasource">
SELECT *, 'false' as checked
FROM contacts
</cfquery>
<cfreturn allcontacts />
</cffunction>
You can add the checked column as I did above or:
SELECT *, checked='false'
FROM contacts
or
QueryAddColumn(allcontacts, "checked", "bit", arraynew(1));
Thanks.
Ed
<cfsavecontent variable="actionRemove">
var contactList = contactList;
var confirm = function (evt)
{
if (evt.detail == mx.controls.Alert.OK)
{
alert('<cfoutput>CONTACTLIST.ROWSTATUS.ACTION</cfoutput>');
<cfquery datasource="dsNameHere" name="deleterec" >
<!--- add delete sql here--->
</cfquery>
for(var i:Number = contactList.length-1; i >= 0; i--)
{
var item:Object = contactList.dataProvider[i];
if(item.checked.toString() == "true")
{
contactList.selectedIndex = i;
GridData.deleteRow(contactList);
}
}
} else { alert("Cancel"); }
}
alert("Are you sure you want to remove this panorama?", "Warning",
mx.controls.Alert.OK | mx.controls.Alert.CANCEL, confirm);
</cfsavecontent>
What I am not sure of is what I am referencing from the array of what has been selected for delete. Normally I would do like so...
DELETE FROM myTable
WHERE id = some_value
I am not sure how to get my 'some_value' once the form is submitted.
Hope this is clear.
Cheers (learning a lot!)
Ed
I'm having problems getting this to work after the dataProvider has been modified via remoting to a web service. I have also tried loading all of my data into a grid and using that awesome applyFilter script from this site as well. Both seem to not post anything in the arrays (form.gridname arrays are ALL empty) after the dataProvider has been changed. It works just fine if I check the boxes and submit without filtering.
Any ideas?
No, it does not work that way. You can't mix CF with actionscript like that. Remember that ActionScript runs in the Flash player. It is as if you would tell the flash player to execute <cfquery>. It won't be able to do it. In fact, if you get the query to execute, it will do it when the page loads, as it executes any code in the page. To clarify, <cfsavecontent> is only a way to get the actionScript script in a string and then paste in a control event handler that will execute when the ActionScript event fires in the client.
To do what you want, you will need to submit the form or call a remoting service.
I know it is strange, I hope that makes sense.
Ska,
It has been noted in the filter post that it does not work for editable grids if you want to submit it and get the arrays. There is also a fix to the filter code that does work with that. You will see that the code gets more complex because you need to do everything manually. Anyway, I would say that if you use remoting, stick with remoting, if you use submit, stick with loading the grid as normal.
On submitting the form, with checkboxes checked of course, the array is empty. (The grid, in another page without the cftree, works 100%.)
Rumour is that this is a known bug in CF. Is it really?
What is the solution to passing the selected rows data to the next page, without having to rely on the array?
Thanks Laura and everyone for making this the premier place to look for Flashy forms type stuff.
Thank you for your comments. Regarding your question, see my answer to Ska above your comment. The same thing applies to populating the grid with remoting because you are manipulating the dataProvider directly. It is not a CF bug.
Great website by the way!
Thanks for the feedback.
I've created a custom tag to do that. When I created it, I emailed it to Laura. She may want to post it on the site. It parses through what was clicked/unclicked (edited), and what was really left clicked to give you the necessary primary key for the row(s).
Let me know if you want a copy.
Sami Hoda
Cheers,
Ed
Thanks a copy of that custom tag would be great.
Joel
samihoda <at> gmail <dot> com
Dimitry
See my comment above.
There is a good example in the docs:
http://livedocs.macromedia.com/coldfusion/7/htmldocs/00000266.htm
You just need to make a loop to find all the checked items.
Thank you for your help. I think I'm on the right track now.
Dimitry
type="boolean"
The problem is, I need a click event to be fired when any of the checkboxes are clicked which tells me which one was clicked. I need this so I can update a text box with the total checked $. I tried attaching the cellPress event to the grid but that is not fired when the checkbox is clicked. I think I need to use the click event from the checkbox class, but I can't figure out for the life of me how to access the checkbox object since CF takes care of its creation. Will I need to attach an event to EVERY SINGLE check box in the grid? It will need to be dynamic since the contents of the grid may be reloaded with flash remoting at any time. Is this just way more complicated than it needs to be, or have I missed the "simple boat" :)
Please advise if you have any ideas.
Thanks in anticipation.
Here's what I did to accomplish that:
selectmode="edit" in my cfgrid tag and
select="no" in EVERY cfgridcolumn tab BUT the checkbox.
Basicaly, you are turning "on" all the whole grid, and then turning "off" all but one column.
On a side note, some grid events like cells gaining focus aren't fired unless the cell is enabled.
can i fire a function when the checkbox is clicked?
thanks
tim
Thanks for this AWESOME stuff - it has helped me so much.
I would like to check to see than no more than 10 checkboxes are checked before the form can be submitted. In other words, if 12 checkboxes are checked by the user, an error should pop up saying "please check max 10 checkboxes". Even better, as soon as the 11th checkbox is checked, the error should pop up and disallow the check.
Is there an easy way to do this?
Thanks very much,
Justin Schier
I'm using only remoting (as you've advised Ed to do in one of your posts). However, I'm having a bug at the moment, and I really don't know how to solve it. I'd be very much grateful if you could please help me out.
Ok, so here goes...
I have a button with a "-" (minus) label on it and when I click on this button, it should remove the checked items from my grid. The onClick event triggers the following function:
public function delFromGrid():Void {
var myGrid = myGrid;
var confirm = function (evt)
{
if(evt.detail == mx.controls.Alert.YES)
{
for(var i:Number = myGrid.length - 1; i >= 0; i--)
{
if(myGrid.getItemAt(i).checked.toString() == "true") {
myGrid.selectedIndex = i;
alert("id: "+myGrid.getItemAt(i).id); //it alerts the id correctly
//make a call to my CFC to flag the selected id
var myID:Number = myGrid.getItemAt(i).id;
myForm.myGlobalObjects.myCFCName.delRecord(myID);
//it never calls this function, and I really don't know why
GridData.deleteRow(myGrid);
}
}
}
}
alert("Are you sure you want to remove the selected record?", "Warning",
mx.controls.Alert.YES | mx.controls.Alert.NO, confirm);
}
Now, the bug is:
You will notice the following line of code
myForm.myGlobalObjects.myCFCName.delRecord(myID);
But this piece of code is NEVER executed!
The part alert("id: "+myGrid.getItemAt(i).id); is working, and even the GridData.deleteRow(myGrid); is working but not the call to my CFC!
And since I'm not submitting anything, I can't obviously check whether the gridName.ROWSTATUS.ACTION is "D" to process the deletion of the record id from my database.
I've also tried the following istead:
if(myGrid.getItemAt(i).checked.toString() == "true")
{
myGrid.selectedIndex = i;
alert("id: "+myGrid.getItemAt(i).id);
//make a call to my CFC to flag the selected id
var myID:Number = myGrid.getItemAt(i).id;
//create a function to test whether the myID can be passed to another function
checkID(myID);
GridData.deleteRow(myGrid);
}
And then in my function checkID, I do:
<!--- Function to process id to be deleted --->
public function checkID( id:Number):Void {
alert("received id: "+id+" from grid");
}
But it never alerts the id!!
So, I'm a bit stuck with this at the moment and I really can't figure out why this is not working at all!
The funny thing is, likewise, I have another button labelled "+" to add records to the grid using a function called addToGrid, and inside this function I call another function called buildData() which actually calls my CFC to insert the record to my database, and this works!!!
I'd be very much grateful if you could please help me sort out this problem.
Thanks and regards,
Yogesh Mahadnac
Actually I've figured out the solution and I wanted to share it with all of you here ;-)
Instead of just checkID(myID); I only needed to do _root.checkID(myID); and this did the trick.
Hope this helps you all.
Regards,
Yogesh Mahadnac
Can someone please help me out? I am trying to retrieve the value of the items selected via AS, similar to fieldName.text, and while it's easy to retrieve the value with a regular form submission, I'm using flash remoting to insert the values into the db, and have not been able to figure out the right way to retrieve the values.
I've been trying
gridName.columnName
gridName.dataProvider.columnName
etc...
but nothing works! Please help!
I would like to either retrieve a list or an array that I can use to populate the database, based on what has been checked in the cfgrid.
I have also tried to create a function that loops over the ids and populate those into a variable as a list, but I'm totally stuck there too.
When I used this, it showed me that the IDs I selected were 2 and 7, but one value was inserted into the database, which was a -1!
for(var i:Number = grid.length - 1; i >= 0; i--)
{
if(grid.getItemAt(i).id == "true")
{
grid.selectedIndex = i;
alert("id: "+grid.getItemAt(i).metlID);
addArguments.theList= grid.getItemAt(i).id;
}
}
Please, please help! :)
In my flash form I have a small button which I've labelled "Add" to add items to the grid
<cfinput type = "button" name="plus_pb" value = "Add" onclick="addToGrid();" tabindex="7">
Now when I click on the "Add" button the following code is executed within my <cfformitem type="script">
</cfformitem>
public function addToGrid():void {
var found = 0;
for(var i:Number = 0;i < myGrid.length;i++)
{
if(
(myGrid.getItemAt(i).adjustment_date == date_txf.text) and
(myGrid.getItemAt(i).id_broker == broker_cb.selectedItem.data) and
(myGrid.getItemAt(i).id_currency == currency_cb.selectedItem.data) and
(myGrid.getItemAt(i).id_adjustment_type == adjustment_cb.selectedItem.data) and
(myGrid.getItemAt(i).adjustment_description == mydesc) and
(myGrid.getItemAt(i).adjusted_amount == amount_txf.text)
)
{
found = 1;
alert("This adjustment already exists in the grid");
break;
}
}
if(found == 0)
{
buildData();
}
}
Now, in my buildData function, I do the following:
public function buildData():Void{
<!--- Create structure --->
var myData:Object = {};
myData.adjustment_date = date_txf.text;
myData.id_broker = broker_cb.selectedItem.data;
myData.id_currency = currency_cb.selectedItem.data;
myData.id_adjustment_type = adjustment_cb.selectedItem.data;
myData.adjustment_description = mytxt;
myData.adjusted_amount = amount_txf.text;
<!--- Make a call to add record to db --->
if( mx.validators.Validator.isStructureValid(this, 'myForm') ){
<!--- Set busy cursor --->
mx.managers.CursorManager.setBusyCursor();
myForm.myGlobalObjects.adjustment.create(myData);
}
}
Finally, in my CFC (adjustment.cfc)
<cffunction name="create" access="remote" returntype="void">
<cfargument name="adjustment_date" type="string" required="yes">
<cfargument name="id_broker" type="numeric" required="yes">
<cfargument name="id_currency" type="numeric" required="yes">
<cfargument name="id_adjustment_type" type="numeric" required="yes">
<cfargument name="adjustment_description" type="string" required="yes">
<cfargument name="adjusted_amount" type="numeric" required="yes">
<cfset locale = #SetLocale("English (UK)")#>
<!--- Each cfargument represents the corresponding "field" I've used in myData in the function buildData --->
</cffunction>
If you need any further help, please don't hesitate to contact me on yogeshm@mail.com
Regards,
Most of what you have, I also have done very similarly, and all of my values are inserting into the database fine, with the exception of the checkbox values from the grid.
The whole issue is that in this function, I would like to retreive the values of the checkboxes selected in the grid via ActionScript.
public function submitTask():Void {
var addArguments:Object = {};
<!--- simple text inputs --->
addArguments.taskName = taskName.text;
addArguments.taskComments = taskComments.text;
addArguments.taskPublication = taskPublication.text;
addArguments.taskParagraph = taskParagraph.text;
addArguments.wucIndex = wucIndex.text;
addArguments.wuc = wuc.text;
<!--- radio button (e.g. addArguments.status = edit_status.selectedData;) --->
//addArguments.myGrid= myGrid.id
<!--- need to do something different for myGrid grid to retrieve values --- but what??? - the following doesn't work--->
for(var i:Number = myGrid.length - 1; i >= 0; i--)
{
if(myGrid.getItemAt(i).id == "true")
{
myGrid.selectedIndex = i;
alert("id: "+myGrid.getItemAt(i).id); //this shows the id number
addArguments.myGrid= myGrid.getItemAt(i).id;
}
}
<!--- dropdowns --->
addArguments.system = system.value;
addArguments.type = type.value; addArguments.jobGuide = jobGuide.text;
<!--- only make call if all required fields are supplied --->
if( mx.validators.Validator.isStructureValid(this, 'myForm') ){
<!--- show clock cursor --->
mx.managers.CursorManager.setBusyCursor();
<!--- call service and insert data - this references the inc/myService.cfc --->
myForm.myGlobalObjects.myService.create(addArguments);
}
}
This is the grid that the values are being captured from:
<cfgrid name="myGrid" rowHeight="100" rowheaders="false" query="getData" width="625" height="350" selectmode="edit">
<cfgridcolumn name="id" header="Select" type="boolean" width="46">
<cfgridcolumn header="Title of Data" name="dataText" select="no" >
</cfgrid>
How can I capture these values in the submitTask() function above?
Thanks again for the help!
public function submitTask():Void {
var myGrid = myGrid;
for(var i:Number = 0; i < myGrid.length; i++)
{
if(myGrid.getItemAt(i).id.toString() == "true")
{
var idx:Number = i;
myGrid.selectedIndex = idx;
var myID:Number = myGrid.getItemAt(idx).id; //here maybe you will have to change Number to String
alert("id where checkbox is checked: "+myID);
}
}
}
Hope this helps.
Else you can contact me on yogeshm@mail.com
Good luck!
The code you provided however, is exactly what I'm using already (just using different syntax). Take a look at the code that I submitted in my last post.
It only saves one value at a time. I need to capture ALL of the values in a list or an array - for instance, if the user selected items 1, 3 and 5 out of the options 1,2,3,4,5,6,7,8 - I want to end up with a resulting list of:
addArguments.myGrid= "1,3,5" once it has been captured.
If someone can please help, I would greatly appreciate it!
public function submitTask():Void {
var myGrid = myGrid;
var myList:String = "";
for(var i:Number = 0; i < myGrid.length; i++)
{
if(myGrid.getItemAt(i).id.toString() == "true")
{
var idx:Number = i;
myGrid.selectedIndex = idx;
var myID:Number = myGrid.getItemAt(idx).id; //here maybe you will have to change Number to String
myList = myList + myGrid.getItemAt(idx).id + ",";
alert("id where checkbox is checked: "+myID);
}
}
myList = myList.substr(myList.length,-1);
//then you can add mylist to your variable
addArguments.yourVariableName = myList;
}
Hope this helps.
Regards
Unfortunately this isn't doing the trick either. I know there has to be a way to get these values in a list or an array - what am I missing??
I am not completely sure about what you want to do, but if what you want is to get the checked id in an array, you would do something like (assume you have an id column):
var selectedIds:Array = [];
for(var i:Number = 0; i < contactList.length; i++){
var item:Object = contactList.getItemAt(i);
if(item.checked.toString() == "true") {
selectedIds.push(item.id);
}
}
This will give you an array will all the ids of the checked items.
Actually, I just found a function that I wrote some time ago to which you can pass the name of the column you want the array to be populate with.
public function getSelectedItems(grid:mx.controls.DataGrid, checkColumn:String, column:String):Array{
var selected:Array = [];
for(var i:Number = grid.length-1; i >= 0; i--) {
var item:Object = grid.getItemAt(i);
if(item[checkColumn].toString() == "true") {
selected.push(item[column]);
}
}
return selected;
}
checkcolumn is the name of the column that contains the checkbox, and the column is say "id" or "lastName", whatever you want your array to have.
Thanks so much! I'm sure this is on the right track, and I'm probably using it wrong. I'll try to be more clear about exactly what I'm trying to do. When referencing this "CheckBoxes in a cfgrid example", if you load it and check Alan and Andy, for example and then hit submit, the contactList.lastName array is returned with the values of Alan and Andy. That is what I want to retrieve via AS.
Referring to your Real Estate Sample Application, you capture the flash remoting variables to be populated into the database when the user submits the form. However, since the "submit" is not taking place, the contactList array isn't retreived. In your Real Estate example, you have a section where all of the values of entered data are captured - on the index.cfm page in the :
public function submitEdit():Void {
var editArguments:Object = {};
<!--- simple text inputs --->
editArguments.mls_id = edit_mls_id.text;
<!--- radio button --->
editArguments.status = edit_status.selectedData;
<!--- checkboxes --->
editArguments.hasPool = edit_hasPool.selected;
ETC....
}
}
}
Basically I am trying to set the editArguments.dataGridValuesThatWereChecked
to pass in the editArguments function.
I tried using the example that you submitted and somehow it hung the whole form. This is what I tried to use:
public function getSelectedItems(metlList:mx.controls.DataGrid, id:String, metlID:String):Array{
var selected:Array = [];
for(var i:Number = metlList.length-1; i >= 0; i--) {
var item:Object = metlList.getItemAt(i);
if(item[id].toString() == "true") {
selected.push(item[metlID]);
}
}
return selected;
alert("ids selected: "+selected; //it hangs with or without this line}
This is the grid that I'm working with:
<cfgrid name="metlList" rowHeight="100" rowheaders="false" query="getMetls" width="625" height="350" selectmode="edit">
<cfgridcolumn name="id" header="Select" type="boolean" width="46">
<cfgridcolumn header="METL ID" name="metlID" display="false"/>
<cfgridcolumn header="METL" name="metlText" select="no" >
</cfgrid>
Hopefully this helps to clarify what I'm trying to do. Ultimately, I would like the list of metlIDs in a list or an array.
If you can help I would be SO grateful!! Thanks again for all of your efforts on this site - it is my main resource for developing cf flash form apps!
Firstly...fantastic site Laura. Been here countless times in the past month as all google paths lead me here :).
My question is the same as Brad Wood asked above, yet as I see no reply to his post I'm gathering that it's not possible to fire an event on the checkbox object.
Can someone tell me definitively that this is the case? I will then can my nice flashy grid for now and move on.
Also, I've heard that Flex now uses a superior version of AS than cfform does. Is this true and do we think cfform will follow flex and use the same platform.
var listener:Object = {};
var grid1:mx.controls.DataGrid = grid1;
listener.modelChanged = function(evt):Void {
if (grid1.dataProvider.length){
grid1.selectedIndex = 0;
_root.updateGridAll();
}
}
grid1.addEventListener('modelChanged',listener);
Any ideas?
Any ideas what is going on on the server side that I should be looking into?
I have been toying around with the grid filtering and this example. I was wondering if anyone has filtered another grid by what was selected by a checkbox in a secondary grid by means of a button.
Populate grid1 with information from a query. I would like to then select specific rows of that grid and click a Selection button and pass the selected information to grid2.
Basically filtering the next grid on if the checked box is true.
I am new to this and still digesting how the the applyFilter accually works in the grid filtering example.
Any info you can provide would be great.
-Vik
Now onto my question...
I've got a checkbox in my grid and i want to disable some of the based on who they are. However, I'm not sure how to reference the checkboxes in the grid... Here's my code:
<cfform name="myform" width="600" format="Flash" action="saveFile.cfm?oppID=#oppID#" skin="haloorange" timeout="100" enctype="multipart/form-data" onload="onFormLoad();">
<cfformgroup type="tabnavigator">
<cfformgroup label="Attachments" type="page">
<cfformgroup label="Current Attachments" type="panel">
<cfformitem type="script">
<!--- onload function --->
function onFormLoad(){
var listener:Object = {};
//put the controls in scope to avoid calling _root
var attachmentList:mx.controls.DataGrid = attachmentList;
listener.modelChanged = function(evt):Void {
attachmentList.removeEventListener('modelChanged',listener);
<!--- select first item --->
if (attachmentList.dataProvider.length){
for(var i:Number = 0; i < attachmentList.dataProvider.length; i++) {
if(attachmentList.dataProvider[i].AttachOwner.toString() == 'haj') { //enable checkbox }
else { //disable checkbox }
}
}
}
attachmentList.addEventListener('modelChanged',listener);
}
</cfformitem>
<cfformitem type="text" style="color:##FF0000;">** Click on file name to view attachment **</cfformitem>
<cfgrid name="attachmentList" query="attachmentsQuery" height="220" rowheaders="false"
selectmode="edit" onchange="#launchAttachment#">
<cfgridcolumn name="checked" header="Delete" type="boolean" width="46" >
<cfgridcolumn name="AttachOwner" display="yes" select="no">
<cfgridcolumn name="AttachID" display="no">
<cfgridcolumn name="AttachName" header="Attachment" select="no" />
<cfgridcolumn name="Name" header="Attached By" select="no" />
<cfgridcolumn name="DateTimeKey" header="Attach Date" mask="MM/DD/YYYY" select="