I'm still working through some minor DataGrid issues with custom ItemRenderers. Through reading various blogs and posts on FlexCoders, I came across the absolute best explanation of how DataGrids work behind-the-scenes. Ben (sorry I don't know his last name) has posted a sample DataGrid / ItemRenderer application where he explains how DataGrids operate on and display data from their data providers. Here is an excerpt from his posting:
from Ben's blog postingIf your DataGrid's dataProvider has 100 items, but it is only big enough to display 10 at any given time, the DataGrid only actually draws 10 items, in order to maximize performance. When you scroll the DataGrid there aren't any new items being drawn, it is simply swapping the data properties between the already drawn items. So scrolling down one row means that the piece of data for the second item is switched to be the data for the first item, the second item receives the third item's data, and so on and so on. During these reassignments, things like whether or not the CheckBox should be checked get all messed up. Some get checked, some get unchecked... its completely unpredictable. To handle this problem, we must override the data's setter method and use our own logic to determine whether or not the CheckBox should be checked.
What a clear explanation of how things work! As I mentioned earlier I'm still working through some issues with my application. I'll be finishing it up over the next few days at which point I'll be posting a follow-up to my previous "DataGrid Woes" post.
About this post:
This entry was posted by Aaron West on November 3, 2006 at 10:36 AM. It was filed in the following categories: Flex. It has been viewed 24855 times and has 15 comments.
1 related blog entries
- DataGrid Weirdness With Checkboxes (October 19, 2006)
Hey Aaron, just wanted to let you know that during the exploration for my latest post I discovered the solution for your "one itemRenderer updates another" issue. If you make the whole class that is used in your dataProvider (PersonVO or whatever) Bindable, and update the values in the data override of one, the other should automatically update, as long as you've correctly overridden the data method in it. Make sense?
Nice reserch buddy ! buck up ! But i m facing another problem
with data Grid that i create a grid at run time now i want to
item render component at run time if any body have solution then plz inform
OMG! This was f'ing driving me crazy. I am not using the DataGrid but the List Component and the same madness is happening with simple stuff like graphics and other vars. This post seems old but the problem still remains. I wonder should we get a discount from Adobe every time we run into a problem like this and it makes us lose clients, time, or revenue? LOL. Never would happen. The Official Adobe Flex Blogger have to know about this stuff ... because it actually really really common for someone to use a checkbox of some type of data in a List control. In my app. I was getting duplicate items -- Items disappearing and all types of weirdness. Seems like a poorly written component -- how could it ever get out the door like that??
@Brian - Yea, this post is old but I believe the issues have been resolved with the latest mxmlc compiler. I haven't attempted to replicate this issue using old Flex Builder projects and the latest Flex SDK, but I think this is fixed. At least, if your MXML / AS3 is written a certain way.
I wound up fixing this on Flex 2 by taking some clues from other blog posts on how to wire up the item renderers and listeners better. Keep digging, I think a solution is out there for you.
Actually I am using the most up to date sdk and compiler and the issue is still around. I will post my work around for it.
@Brian - Even if you are on the latest Flex 3 SDK I believe there are ways to program your components and item renderers such that really odd behavior occurs. Item renderers have been real finicky in my experience and it's taken a lot of love and care to get them to work properly.
Yeah, sorry my response was not clear. Yes the problems do appear, AND yes I have figured it out since my original post. I will post my solutions so other who run into it can benefit.
@Brian
So are you going to post your solution? I am an other who would benefit, thanks!
@Brian
Errrr..... is the solution around yet? I am an "other who would benefit".
I have this issue with a combobox rendered in a grid, and it is working in a similar fashion as Ben described in his original post... You guys already know the feeling.
I have been searching for a solution for a couple of days now. I don't seem to find any that works, though.
Regards.
ok, I finally got it.
I DO post the solution so "other who run into it can benefit". I will try to keep it as simple as possible, avoiding any unnecessary code. Only the essential code is shown. The more simple, the better:
This is the grid:
<mx:DataGrid dataProvider="{myDataProvider}" editable="true">
<mx:columns>
<mx:DataGridColumn dataField="myDataField" editorDataField="myEditorField"
itemRenderer="myRenderers.myCustomComboBox" rendererIsEditor="true"/>
</mx:columns>
</mx:DataGrid>
(Note the "editable='true'" property of the dataField)
This is the custom renderer, again as simple as possible:
<mx:VBox height="100%" width="100%" xmlns:mx="http://www.adobe.com/2006/mxml">;
<mx:Script>
<![CDATA[
// Define a property to return the new value to the cell.
public var myEditorField : String = "";
/**
* Override the set method for the data property
*/
override public function set data(value : Object) : void {
super.data = value;
if (value != null) {
for (var index : uint = 0; index < myComboDataProvider.length; index++) {
if (myComboDataProvider.getItemAt(index).data == value.importantField) {
myComboBox.selectedIndex = index;
break;
}
}
}
}
/**
* Changes the public variable, so that the data in the
* combobox can be accessed from outside.
*/
private function changeReference() : void {
myEditorField = myComboDataProvider.getItemAt(myComboBox.selectedIndex).data;
}
]]>
</mx:Script>
<mx:ComboBox id="myComboBox" change="{changeReference();}" dataProvider="{myComboDataProvider}" width="100%"/>
</mx:VBox>
The DataProvider in the myCustomComboBox may be whichever you want (ArrayCollection, XMLListCollection, etc). I am supposing that such DataProvider has a field called "data" (myComboDataProvider.getItemAt(index).data).
The input object (from the DataGrid to the myCustomComboBox) has a field called "importantField" which stores the value we want to change with the ComboBox (value.importantField).
The event "change" triggers the function "changeReference" and saves into "myEditorField", which is the connection between the DataGrid and the itemRenderer (myCustomComboBox ).
I really hope this helps other.
Good luck.
@Hon - Thanks for posting your solution. I love it when people follow up their own questions when answers. It will certainly benefit anyone who might read this post and the comment thread.
@ Aaron
My pleasure :)
I'm having problem with a datagrid and itemrenderer (a VBOX).
ex. When I attach an itemrenderer (flex 3.2) to my datagrid and then tweak the height of the VBOX (root) itemrenderer of the last Cell-field-row, the rest (all empty row below) of the datagrid layout will inherit from the last change.
Strange! The only way to avoid that problem was to add a null object on every update of the datagrid provider.
Fabrice
I have a problem with flex datagrid. I have a datagrid with 5 columns in that. Based on the row selected, i need to handle some buttons ( either enable or disable). All this is working fine. Here comes the problem. For the last column, i have the data like A with a link ( used renderer for that ). but when i select that A or click on it, the row is not getting selected. so the enabling and disabling of buttons is a proble. How can i achieve that
@Chaitanya - I'd have to see your code in order to offer any advice. Feel free to use Pastebin.com or some other code sharing service to share your code. Then, use my Contact Me page to send me the details.