TrajiklyHip - Blog - The Personal Blog of Aaron West
The Four Obsessions of an Extraordinary Executive by Patrick Lencioni         The Five Temptations of a CEO by Patrick Lencioni         Getting Things Done by David Allen         The Tin Roof Blowdown by James Lee Burke         The 7 Habits of Higly Effective People by Stephen R. Covey         Books I've recently read and recommend!
October 19, 2006
DataGrid Weirdness With Checkboxes
Posted At : October 19, 2006 11:50 AM | Posted 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 (12) | Print | Send | del.icio.us | Linking Blogs | 11702 Views

Related Blog Entries

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
[Add Comment]
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.
# Posted By joshuajnoble | 10/19/06 1:59 PM
Could this be an IE issue? I submitted multiple times and never saw a problem.
# Posted 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.
# Posted 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.
# Posted By Campbell | 10/19/06 5:21 PM
Yo G, this should help!

<a href="http://www.jessewarden.com/archives/2006/10/checkb...">http://www.jessewarden.com/archives/2006/10/checkb...</a>
# Posted 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
# Posted 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...">http://www.dgrigg.com/post/DataGrid-ItemRenderer-w...</a>. Hope this helps.
# Posted 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=&quot;true&quot; on the column rendererIsEditor=true and editorDataField=&quot;selected&quot;. 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.
# Posted By Joan Lafferty | 2/4/08 4:59 PM
Did you know how insert HSlider components inside a Datagrid?
# Posted 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
# Posted 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
# Posted 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.
# Posted By Aaron West | 5/26/08 9:19 PM
[Add Comment]
BlogCFC was created by Raymond Camden. This blog is running version 5.5.005.