View Full Version : ItemRenderers List/Tree/DataGrid (recycling of)

Mortimer Jazz
05-22-2007, 10:07 AM
Hello all,

I wanted to ask how others deal with recycled item renderers. I have 2 solutions to the problem (see links below), but I'm asking because I've come across the need to implement them reasonably often, and so assume others do to - yet I see very little mention of this problem (and solutions) on the web ... and I wanted to double-check there's not a standard way of achieving this, that I may be overlooking?

Setup (it's easy):

You'll need to create a customer item renderer for a List component
This renderer must contain a component which can be selected (e.g. a radiobutton or checkbox is ideal)
Add enough items so that your List scrolls.

Now simply select one of the radiobuttons/checkboxes, then scroll down so that it disappears offscreen - you will probably find that one of the other radiobuttons/checkboxes further down the screen is selected ... and when you scroll back up, the original one you selected may or may not still be selected - in other words the selected item appears to jump around.

The same thing can be seen to happen if you use radiobuttons or checkboxes in a Tree component and open/close the branches.

I have solutions posted on my blog here (http://nwebb.co.uk/blog/?p=36) and source code for one of the solutions here (http://nwebb.co.uk/blog/?p=38)

I've encountered the same issue with RadioButton Trees, scrolling renderers with selectable items, and itemRenderers with more than one state, yet I've only ever seen one other person post on the subject, so I'm really curious ..... are other people simply not running in to this problem, or do you handle it the same way?


05-22-2007, 04:50 PM
I don't have the code for my CheckTree class handy right now, but I believe that I force the item renderers to redraw when the selection changes.

05-22-2007, 06:58 PM
Hi Everybody,

Its nice that you brought this topic up Jazz. Well I have been working with itmRenderers for just 2 weeks now, so I guess I may not be right. But I thought I should put my views down too.

I have come to a point where I am not able to accomplish a few things. My main problem comes with itemRenderers usage inDatGrids, NESTING them with other layoutControls.

In my case, I would like to override the RadioButtonGroup/CheckBox functions and place it in an HBox and then put it in a DataGrid. This is what I have to do to get the RadioButtonGroup or CheckBox to appear centered in the DataGrid. But by this time, I have gone far enough to have lost control of the set and get value functions of the RadioButtonGroup/CheckBox. Be it a RadioButtonGroup or CheckBox, there must be someway of both displaying it beautifully and still being able to override the set/get functions.

So please share your ideas and thoughts on how this can be accomplished without having to compromise on any one of the goals i want to achieve. May be I am being to amateurish and missing out some valuable valid points. So please feel free to discuss the same.

Mortimer Jazz
05-23-2007, 07:17 AM
I don't have the code for my CheckTree class handy right now, but I believe that I force the item renderers to redraw when the selection changes.
Hey Josh, thanks for the reply. Yes, I saw a CheckTree example in the Flex cookbook (yours?), and each node is checked recursively, which makes sense in that situation because of the "Schroedinger" state (i.e. where the selected state of the children will affect the display state of the branch). I thought about recursion as an option, but for something as simple as a List full of scrolling renderers, it seemed a bit unnecessary.

Hey cuk, I don't want this post to go too off-topic if that's okay (it may be worth starting a new thread for your question ) but as I've done this I can help out (or at least it sounds like I'm doing what you want - check the attached gif)

You mention "loosing control of the set". By this, if you mean a lack of access to the events being fired, it may be worth taking a look at my post on how to dispatch an event from a custom item renderer (http://nwebb.co.uk/blog/?p=16)
As for the general layout, my setup is as follows: my DataGrid item renderer is an Hbox, and inside that I have three VBoxes, each with a label and RadioButton inside. My VBoxes have horizontalAlign="center" set. On the DataGrid itself (not the columns) I set verticalAlign="middle". The RadioButton click event calls a single method which checks the event.currentTarget.id to see which button was clicked. What you can also do is override the data getter/setter in your itemRenderer - there is an example of this in my source-code example (see the source-code link in my first post)

06-05-2007, 08:58 PM
Hi guys,

I didnt mean to take the topic off-track sorry. Actually i did post it as a different thread and I did not receive any response and that is the reason, I ended up seeking help from this thread. Thanks for the suggestions because they did work indeed. but i had a weird problem,. I had to get only the first 2 columns aligned centrally, all other columns conained long decimal values and had to be displayed aligned to the left. But my problem was finally solved. i went through a sample code that i had downloaded sometime back, which seemed to fix the issue.

Thanks for the help and suggestions guys!

Mortimer Jazz
06-06-2007, 07:21 AM
Hi guys, I didn't mean to take the topic off-track sorry. Ah no problem at all :] I just know how easily threads can wander and I had been hoping to hear back from more people on this topic - but the thread went quiet after that anyway.
It would be interesting to hear more details of how you solved the problem.

I've since posted a follow up, with a slightly more scalable way to dispatch events from an item renderer (http://nwebb.co.uk/blog/?p=47) (as a result of discussions on Flexcoders) if you're interested.

08-20-2007, 12:40 PM
When the data is rendered, you are likely only setting the outcome based on one condition.

e.g. you want a check box to be selected based on a property, so you say something like:

if (archived) {
//set archived checkbox value to true

Now when you scroll down the list, you get what you see.

So try adding the rest of the conditions. In our case, it is only the else.

if (archived) {
//set archived checkbox value to true
} else {
//set archived checkbox value to false

That should do the trick.

Mortimer Jazz
08-20-2007, 01:45 PM
Thanks for the reply Roustalski :]

If I recall my thinking when I posted this, the main problem I was trying to nail down was displaying the relevant state for a component without storing this information in the data-source.

In other words, the data used to generate the checkboxes should not also be used to store the state of each checkbox (because details about the visual state simply do not belong there).

If I understand your suggestion that seems to be what would be needed - it is what most people do, but I was looking for a way around that. The problem is that while there is a block of data that pertains to every checkbox, the item renderers themselves get recycled - so a single component could appear several times in a scrollable list.