Aaron West's Technology Blog: DataGrid Weirdness With Checkboxes

You Need to Be a Little Crazy by Barry J. Moltz

Principle Centered Leadership by Stephen Covey

Books I've recently read and recommend!

October 19, 2006

DataGrid Weirdness With Checkboxes

Posted On: October 19, 2006 11:50 AM by Aaron West
Related Categories: Flex

DataGrid's are cool, but yeash I've run into a lot of problems with them. I've put together two *real simple* online demonstrations that illustrate the behavior I'm seeing with a grid. I'd love for someone more experienced to check out these two examples and offer any insight or solution.

http://www.trajiklyhip.com/flex/gridexample/DataGridExample1.html
This is a simple grid that uses a custom Checkbox item renderer written in AS3. Clicking the submit button will display whether or not each Checkbox is selected. Make some changes to the boxes, de-selecting a few or an entire column and then click the submit button to see the selected value. The Alert box usually displays the right info the first time through, but after you've gone through a few rounds of selecting and de-selecting some of the boxes it will not show you the correct true/false value of each box.

http://www.trajiklyhip.com/flex/gridexample/DataGridExample2.html
This is another simple grid that is the same as the previous one only with more rows of data to make the DataGrid scroll. De-select the first "Group Owner" Checkbox (row 1 with the ID = 12) and then click use the grid scroll bar to scroll up and down. As you scroll, other Checkboxes are selected and deselected at random.

Incidentally, if you right-click the DataGridExample1 movie you can view the source to see what I'm doing.

Comments (24) |

del.icio.us |

Digg It! |

Linking Blogs | 22313 Views

Related Blog Entries

Flex DataGrid ItemRenderers Explained (November 3, 2006)

Comments

[Add Comment] [Subscribe to Comments]

I ran into a lot of similar problems in Flex 1.5 and I hoped that it would go away in Flex 2, sad to see that it hasn't. We used to do things like hide the datagrid, write all the data to an array, clear the datagrid and then repopulate the grid from the array. Sucky.

# by joshuajnoble | 10/19/06 1:59 PM

Could this be an IE issue? I submitted multiple times and never saw a problem.

# by Bryan | 10/19/06 4:55 PM

No, I'm using Firefox. If you change the selection on one Checkbox and then view the results you typically won't have any problems. It's when you select an entire column or several Checkboxes where the issue becomes really easy to replicate. It also helps if you select the boxes quickly - although I have replicated this by selecting one box, waiting 2 seconds, selecting the second, etc. etc.

# by Aaron West | 10/19/06 5:08 PM

Looks like a data binding issue to me. Maybe a fixe is to iterate over the actual Datagrid rows rather than the dataprovider. I know i know its sorta a hack but if it solves your problem today.... On occasions I have seen binding not doing updates to the bound data source when changing focus to diferent controls (ie the alert box), but I have not found the problem to be consistant. if you add an click handeler to you datagrid and TRACE off the values rather than Alert.show i think you will find that the datasource reflects the changes.....ushally does for me.

# by Campbell | 10/19/06 5:21 PM

Yo G, this should help!

<a href="http://www.jessewarden.com/archives/2006/10/checkb...;

# by JesterXL | 10/19/06 7:18 PM

See more itemRenderer for DataGrid:

IconRenderer, BackgroundColorRenderer, CheckBoxRenderer:
http://philflash.inway.fr/flex/dgsimple

CheckBoxRenderer, ComboBoxRenderer, ColorPickerRenderer:
http://philflash.inway.fr/flex/dgRendererSimple

Philippe

# by PhilFlash | 10/20/06 7:42 AM

Hey Aaron, here's a sample to address the filtering problem I think you were having <a href="http://www.dgrigg.com/post/DataGrid-ItemRenderer-w...;. Hope this helps.

# by Derrick Grigg | 10/21/06 8:05 PM

If you are using a CheckBox as an itemRenderer in a DataGrid and you expect it to change your underlying dataProvider, be sure that you have editable="true" on the column rendererIsEditor=true and editorDataField="selected". Without these settings, when a CheckBox's selected property changes, you are not actually affecting the underlying dataProvider. If you set this itemRenderer to also be an editor, then the DataGrid automatically updates your data (similar to the default TextInput itemEditor of a DataGrid column). This will also solve your issue of scrolling and losing your selection.

For more info on itemRenderers and recycling rows, the best article I know of is by Alex Harui on http://blogs.adobe.com/aharui. Search for his articles on itemRenderers.

# by Joan Lafferty | 2/4/08 4:59 PM

Did you know how insert HSlider components inside a Datagrid?

# by Jorge | 5/7/08 12:10 PM

@Jorge - You need to create an item renderer (using the ItemRenderer tag or equivalent ActionScript) inside one of your data grid cells. You configure the item render so it behaves like a Flex component or your own custom component (in your case the HSlider).

Here's some additional information that should help you get started. Both links are to Adobe Flex live docs:

http://tinyurl.com/4xz76d
http://tinyurl.com/4axywy

# by Aaron West | 5/7/08 10:35 PM

Hi..

i am facing the same problem with datagrid scroll and checkbox renderers..
if possible can u post the solution.

Thanks

# by chandana | 5/26/08 1:36 AM

@chandana I never solved the problem I had. Several folks offered suggestions - some mentioned in the comments above - but none solved the problem 100%. I wound up using a different solution than a DataGrid with ItemRenderers. One of these days I plan to try the same type of implementation and see how I make out. Since Flex 3 is out, the problem may be more difficult to replicate or fixed altogether.

# by Aaron West | 5/26/08 9:19 PM

override protected function clickHandler(event:MouseEvent):void {
do not override this function. If you want to override it call the parent one
"super.clickHandler(event)"

# by Mina Sadek | 8/10/08 7:58 AM

Thanks a lot Aaron for your DataGrid/Checkboxes solution. After few changes it worked instantly in my Flex 3 app.
I'm very new to Flex programming so please let me ask two (maybe simple) questions regarding your example:
1. How can I center the Checkboxes inside the column?
2. How can I change the font size in the DataGrid? (I used Strings instead of Integers but I think that doesn't matter)
Thanks in advance.

# by Thomas | 9/30/08 10:16 AM

WebGyver: I was having the same issues, needing to bind this puppy to XML instead of the ArrayCollection in the example. I headdesked for a while until I realized that, duh, the XML value is going to be a string and not a boolean, so I had to edit the mxml to test for whatever string in the XML meant true and what meant false. Ive put the new code up for your (or anyone elses) perusal.

# by Flex programming | 10/20/08 7:07 AM

Hi Thomas,
To make checkbox center, override the updateDisplayList function in renderer file

   override protected function updateDisplayList(w:Number, h:Number):void
   {
      super.updateDisplayList(w, h);

      if (listData is DataGridListData)
      {
         var n:int = numChildren;
         for (var i:int = 0; i < n; i++)
         {
            var c:DisplayObject = getChildAt(i);
            if (!(c is TextField))
            {
               c.x = (w - c.width) / 2;
               c.y = 0;
            }
         }
      }
   }

# by Arivuindia | 10/30/08 4:20 AM

In my case I solved this problem, the cause : i was using in the DataGridColumn the propperty dataField="CONFIRM" and my Webservice was sending "COFIRM" then the ArrayCollection was using COFIRM (N missed) instead CONFIRM too, when I solved this the problem gone...

# by FlashWolver | 12/6/08 8:58 PM

I had the same problem and I found that it was happening
when my dataprovider value representing the checkbox was
not initialized to eiter true or false. In debugging it was showing
up as undefined.
I now set the value to false every time I add a row and there
are no more strange scrolling problems

# by Scott | 5/15/09 5:15 AM

Thanks for the tip Scott. I think its good practice to set all checkboxes to false to begin with.

# by Aaron West | 5/15/09 7:11 PM

Hi Alex,

I have created a check box item renderer for my datgrid.
I will update the arraycollection by checking or unchecking
the checkbox. I will submit the data to backend and I will assign the
dataprovider with updated dataprovider. My data is getting
updated but the some checkboxes are appearing as checked.
They are not getting reinitialized.

Can any body help me solve this issue.Its urgent

Thanks
vin

thanks in advance
vin

# by vin | 6/15/09 1:37 PM

I had problem with the List.
in my item-renderer there was an image which i used to hide when the item is selected
so when I scroll after selecting an item, one of the image of the coming renderes
used to be invisible.
It bugged me a alot but then I do the following in the item-renderer code

override public function set data(value:Object):void
         {
            super.data=value;
            foldername.text= value.@name;

            if(this.owner is MyList){
               var o:Object=(this.owner as MyList).SelectedData;
               if(o!=value){
                  btnArrow.visible=true;
               }else btnArrow.visible=false;
            }
         }
//explanation

1. MyList is my list component simply just extending List.
2. I defined a variable
var SelectedData:Object in MyList.
which stores the data of the currently selected item.

# by Hissam | 7/23/09 12:13 AM

Hello Aaron,

I am having the exact same problem you had in 2nd example

I am using Flex 3.2

Would you like to share with me the workaround you did?

# by Panagiotis Kammas | 11/11/09 6:13 PM

@ Panagiotis - I never actually fixed my grid. I wound up taking a different route altogether. That said, I know there is a solution to the problem and I believe there are several examples in the comments that address the issue. It's all about state management and I was missing something in my code + item renderer.

# by Aaron West | 11/16/09 7:42 PM

Check out page 192, "Flex 3 In Action"

# by Chris | 12/16/09 10:59 PM

[Add Comment]

Sun	Mon	Tue	Wed	Thu	Fri	Sat
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28