Flex ItemRenderer CheckBox Sample
I have run across a lot of posts from people having problems getting checkboxes to properly work in itemrenderers in Flex 2. Here's an easy to follow sample that works. It displays a datagrid with four columns, the first two are just plain text columns, the third contains a checkbox that is bound to the underlying dataprovider and the fourth shows the text value of the boolean from the third column (just so you can see the value is really changing). Change some of the values, scroll up and down, everything stays the way it should, no mystery checks where they do not belong. Following is the actual code for the itemrenderer column, pretty easy. The click event just flips the bound value to the opposite of what it was.
<mx:DataGridColumn headerText="Online" dataField="online">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox click="data.online=!data.online" selected="{data.online}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Hope this helps out, stay tuned for more datagrid help.
Search
About
Archives
Recent Posts
Links
Feeds
Oct 21, 2006 at 8:21 AM
Thanks for the example Derrick, it works just as you say. However, in the real world DataGrid's are most often used to show data from some data source, modify that data, and then submit the changes to the server. I see a lot of weird issues where the data in a grid is changed due to selecting some other control (like a combobox). Here's a scenario: Flex starts up and retrieves a list of company departments. The departments are used as data in a combobox. When a dept. in the combo box is selected, all the employees in that department are listed in a data grid. New selections can be made using the combo box and each time the grid gets updated with new entries. Typically, this is not a problem if you aren't using renderers and you're just displaying values. However, let's say you have one column that represents whether an employee is a manager of their dept. Pre-selecting the check box to indicate this selection after selection is tricky.
I've gotten this type of example to work selection after selection IF I don't change values in the checkbox item renderers. However, if I change one of the boxes, and then select another item from the combo box, Flex freaks out and does not properly select / de-select the right check boxes in the grid.
I'm going to post an updated example of this on my blog so people can see what I'm talking about. My relationship with Flex has been rocky to say the least. If other developers have experienced the same kinds of things I have, no wonder people say Flex is not very approachable.
Oct 21, 2006 at 9:44 AM
Hi Aaron, in all my time doing Flex development I have not run across an issue like you are describing. I have seen weird things happen within ItemRenderers, but I have not seen them affect or be affected by a control outside of the DataGrid. I would be very interested in seeing your example so see if I can offer some pointers on how to resolve the issue. I would suggest you make sure you use ArrayCollection as you dataprovider for the DataGrid and also strongly suggest you use strongly typed objects inside of the dataprovider, instead of generic objects. It sounds like the dataProvider is not getting properly updated in your sample. I'll try to mock up a simple version of what you are describing to see if I run across any issues.
Oct 22, 2006 at 2:59 PM
I've had problems using check boxes in data grids that are populated using dynamic data. The check boxes do not stayed checked as you scroll. For example visit:
http://www.stfm.org/test/flex/datagridcheckbox/bin/datagridcheckbox.html?confid=141
check some boxes and then scroll around. New boxes get checked and the boxes that were checked are no longer checked.
Bruce
Oct 22, 2006 at 5:10 PM
After studying your sample code carefully, I rebuilt the Flex app where I was trying to use a checkbox in my data grid. I got it to work correctly. The key lesson - create value objects using the data returned by the data provider, put each value object into an Array Collection and have the Value Object include a boolean field. Use that boolean field to provide the data for the check box item renderer in the datagrid.
Now my check boxes work great. I'll be posting this example on my blog.
Thanks for the help.
Dec 06, 2006 at 6:19 PM
So if you are populating the datagrid from xml downloaded with an httpservice you would create an arraycollection ? Whats the best way to do that ? Thanks
Dec 06, 2006 at 7:33 PM
Yes I would (and I do). It is an extra step instead of just directly setting the xml as the datagrid's data provider, but the extra step is well worth the benefits of using the ArrayCollection (and bindable value objects) as the underlying data provider, and the difference in processing time is not even noticeable to the user.
Dec 16, 2006 at 4:38 PM
Many thanks for a great tip. Despite using a bindable value object, I have to use the change event of text controls bound to fields of the selectedItem in order to get changes in the text controls to appear in the datagrid, but once I do that it works great.
Feb 13, 2007 at 2:14 AM
Hi guys.
Is there a way to still use the checkbox within the datagrid, but without the need to declare a boolean field within the VO? The reason why I dont want to do it like this is because I need to match the fields within the VO (client side) exactly to the fields within the server side code which in turn needs to match the fields exactly to the db, and we dont want to add a boolean column to the database that wont be needed.
Thanks in advance.
Jaco
Feb 20, 2007 at 9:45 PM
Hi,
i have problem for adding Itemrenderers to dynamic columns.
can i get hint for adding dynamic columns to datagrid?
Thanks in advance.
Apr 10, 2007 at 12:23 AM
good
Apr 10, 2007 at 4:30 PM
Hey Derrick,
New to Flex. Just found your explanation. Thank you so very much for this. Your files and explanation were a life-saver. I hope I can return the favour some day.
Novian
Jul 05, 2007 at 6:47 AM
Hi, This example is very good. Actually it's an issue in flex. The above tweak would solve the checkbox problem in flex.
Jul 20, 2007 at 9:52 AM
the above code doent generate check boxes i am using flex 2.0.1 hotfix
Jul 30, 2007 at 10:55 PM
I am looking for adding itemrenderers to dynamically added datagrid columns. Assuimg I have a datagrid which has one datagrid column and I add more datagrid columns which in case contain a checkbox when I select one checkbox in one of the datagrid column, any event on the datagrid makes checkboxes in all the other new datagrid columns also to be set. This problem is similar to whats asked by prasanth.
Thanks in advance
Sarath
Aug 01, 2007 at 9:32 AM
Sarath, check out this post. It should help answer your questions.
Aug 28, 2007 at 4:55 PM
This is very helpful. I have another issue that is related. I have a checkbox in an itemRenderer which I need to conditionally show based on a true/false value in a column called showCheckBox in the dataprovider which is an arrayCollection. I tried using
visible="{data.showCheckBox}"
but the application just shows every checkbox regardless of whether or not showCheckBox is true or false.
Any suggestions would be greatly appreciated.
Aug 29, 2007 at 8:07 AM
Hi Mat,
Two things come to mind. First, is the property 'showCheckBox' bindable, the datagrid may not be recognizing the changes in the values and thus never updating the visible value. Second, you may need to use a more complex 'drop-in' renderer instead of an 'in-line' renderer to accomplish your task. Check you this post. You should find some answers there.
Sep 23, 2007 at 6:02 AM
Hello..
First.10x for the example..
Second.. I've been trying for a while to do something similar but with Combo box inside the grid...and I've downloaded many examples/browsed many blogs..but with no avail... All I need is to populate the field with inline combobox which gets its list of values from an xml file...
Do I have to create objects for the data in the grid?
Can you please show how can this be done? or at least explain the difference?
Thanks in advance
Oct 24, 2007 at 4:58 AM
Hi,
I am trying to use ur example to get the checkbox displayed in the datagrid that is being populated by the inbulid browse function .
But i am not being able display the checkboxes, any suggestions.
thanks.
Nov 06, 2007 at 3:33 AM
Hi
I have some problem when use checkbox in datagrid. I use httpservice to get XML data from remote database mysql, and create an arraycollection , set the arraycollection(ac) as the datagrid's data provider.
The first question is: the checkbox column data in mysql is '0' or '1' ,but not 'true' or 'false', how to bind with datagrid checkbox?
The second question is: when I select one checkbox in datagrid, then do some operation such as remove the selected record, in actually the selected record has been removed, but the next record 's checkbox I havn't selected was marked as selected.
private function onDelete():void {
for(i=0;i < ac.length;i++){
var item:Object = ac.getItemAt(i);
if(item.approve.toString()=="true"){
ac.removeItemAt(i);
}
}
}
Nov 16, 2007 at 6:53 AM
Great example, very useful and to the point.
I really appreciate the example.
Nov 17, 2007 at 10:08 AM
Does anyone know how to automatically check all checkboxes when the user clicks on a button?
This is my item renderer
Looping through my ArrayCollection, getting each item and trying the following does not work:
myArrayCollection.getItemAt(i).export = true
Nov 27, 2007 at 12:05 AM
ddd
Jan 22, 2008 at 4:10 AM
thanks a ton...!!
it works fine.........
Feb 16, 2008 at 5:06 AM
i want to bind checkboxes to datagrid dynamically in windows application and while checking that particular checkbox i need crystal report according to which it should check that particular id and display the all the records of that particular id........please help me out........???????
Mar 11, 2008 at 9:32 AM
Hi,
Any idea how to write the same code using Action script..
As it is in actionscript....
I dont want to create seperate component... everything i want to write in single file.
something like...
var dgc:DataGridColumn=new DataGridColumn();
var txt:TextInput=new TextInput();
Here how to add txt input to dgc??? any idea??
Is its possible???
Mar 11, 2008 at 10:24 AM
You could possibly do it by defining the renderer class in the same file as your main class, Actionscript does allow multiple classes to be defined in the same file, but you do need it to be a separate class, you can't do it inline like your example.
Derrick
Mar 11, 2008 at 10:47 AM
hi Derrick,
Thanks for reply...
if u dont mind.. can u helpo me to give some sample code ??
thanx in advance
Pratap
Mar 25, 2008 at 2:11 AM
This was helpful, Thanks for posting this, but I have a question regarding using an XMLList as the dataProvider for a CheckBox dropin Itemrenderer. I can't seem to get the true or false values in either an xml text node or xml attr node to get read properly by the CheckBox. It always appears as false.
In one of the comments you suggested that this was a problem and that we should use an arraycollection instead (which ironically in all the online examples that's what's always used for the Checkbox renderer)
what I am trying to understand is why it doesn't work for an XMLLIst of true flase values. Is it because of some sort of value typing ie., string instead of boolean, that is going on?
Thanks in advance!
Hoyt
Mar 25, 2008 at 7:48 AM
Hey Hoyt,
I have not tried it myself so I can not say for sure, but an educated guess would be the data typing of string/boolean would cause an issue when using the XMLList. If you really wanted to stick with the XMLList you would likely need to create a slightly more complicated drop in renderer with some logic built in to read/write the value to the XMLList item as things get checked and unchecked.
Derrick
Apr 01, 2008 at 1:49 AM
Hi there
I am experiencing a problem with my repeated datagrid containing a checkbox column, where by occasionally a checkbox appears to be checked even though the value in the data object is false.
I haven't seen any examples of exactly what I am doing anywhere but basically I am using a repeater to repeat a custom component several times. The custom component contains basically a title text field and a datagrid. The datagrid has 3 columns, i.e a letter prefix (a, b, c, d, e or f), a description column and the third and final column contains a checkbox.
This all seems to be working 90% of the time however sometimes, it does not seem to register the correct state of all the checkboxes.
One other problem with the description column is that scrolling the mouse wheel seems to scroll this text so that it disappears. The weird thing is that it doesn't do this with the prefix column. It is almost as if there is an invisible scrollbar on the description itself and it will let you scroll it one line.
Here is a screenshot showing the datagrid before moving the scroll wheel
http://www.mediakitchen.co.uk/beforescroll.jpg
And after a small movement of the scrollwheel the following illustrates how the description has vanished.
http://www.mediakitchen.co.uk/afterscroll.jpg
If anyone has any ideas about either of these problems I would be most grateful.
Thanks
Paul
Apr 01, 2008 at 1:54 AM
Further to my last post, I meant to say that I am using an array collection as my dataprovider and this array collection is made up of the following object
package
{
public class MarkedObject
{
[Bindable]
public var blockLetter: String;
[Bindable]
public var blockTitle: String;
[Bindable]
public var blockMark: Boolean = false;
public function MarkedObject()
{
}
}
}
Apr 01, 2008 at 9:29 AM
great code and explanation, would anyone here know what to do if by code one would want to tick one of the check boxes inside the ItemRenderer ?
Jul 08, 2008 at 9:32 AM
thxs for sharing this tip Derrick
it saved me a lot of time :D
Jul 14, 2008 at 11:38 AM
Derrick,
Thanks for the example, you really help me, in this issue I spend a lot time, trying to figure out how to make this work.
Aug 04, 2008 at 7:49 AM
Hi Derrick,
Can Any body give me an idea of putting an row of Text box in different columns in a Datagrid.