DataGrid ItemRenderer with filtering
In response to a comment from Aaron on my last post about having issues with using ItemRenderers and filtering data I created a simple sample to show it working correctly and error free. I think the single biggest thing in getting renderers to work properly is to use strongly typed data and ArrayCollections as the dataprovider. This combination seems to prevent unwanted behaviour. Click here to see the sample. Do a right click to view the source.
Search
About
Archives
Recent Posts
Links
Feeds
Oct 21, 2006 at 7:56 PM
Good job.
It must be very cool if I can filter the DataGrid at the header.
Oct 21, 2006 at 10:15 PM
Interesting. When I use the 'Department Filter' drop down and select 'Accounting' I only receive two of the three people. Why is that?
Oct 22, 2006 at 2:25 PM
Umm, because I can't spell 'Acounting', ooops.
Oct 22, 2006 at 3:15 PM
Derrick, thanks again for posting this! I'm noticing some odd behavior still though. The grid starts off with alex, frank, and ivan selected. If you use the dept. filter the a few times and then return to selecting "all," everything is good - alex, frank, and ivan are still the only people selected.
Now, refresh the entire Flex app and while it's still filtered by "all" select bob and charlie. Now, filter the grid by accounting (frank should show as selected), then filter the grid by HR (alex should show as selected), and finally filter the grid by "all" again. The checkboxes should still be correct with alex, bob, charlie, frank, and - if you scroll down - ivan selected. Now, before doing anything else select doug. Doing so checks his box and moves him to the bottom of the Managers list. Now select ed and the same thing happens. You can continue to deselect all those that were selected and they'll move to the bottom of the grid. Why is that? Is there some sorting going on or something? I guess it just seems weird and will prob. illicit complains by users. GRANTED, you have successfully solved the problem which I have been unable to do for at least a week (blush). And for that, I am indebted.
Can you elaborate a bit on why the use of strongly typed data in the ArrayCollection helps with this problem? Since I'm using Web services to return data, I'm not going to be able to use strong types in my ArrayCollection.
Derrick, thanks so much for your examples. While this is frustrating to know end it's fun to work through these issues with other developers.
Oct 22, 2006 at 5:15 PM
Derrick - I posted on your previous blog on this. I want you to know that after I put the data into a value object and put each value object into an ArrayCollection, my check boxes in the data provider worked great.
Aaron - if possible try to take the data from your WebService and place each repeating element into a value object. One of the fields for your value object just needs to be a boolean field. I'll be posting an example of this on my blog. If your WebService is returning XML this is not difficult to do. You can iterate through the XML and place into a value object the child node values you want.
Oct 23, 2006 at 10:02 AM
Aaron, the issue you found is something with sorting. I have the column which contains the item renderer set to sortable="false" but for some reason my ArrayCollection is still getting sorted by that column. I'll have to look into that further.
With regards to why using strongly typed data over generic objects helps, the answer is because the properties can be bindable. Using generic objects, my sample works the same, however I suspect if I added any additional complex behaviour it would start to fall apart quickly. By using strongly typed data you can define properties as [bindable], flex automatically creates an event called 'propertyChange' that gets fired anytime the value of that property changes. All flex components (anything that extends UIComponent) are built to listen for that event (as far as I know), which is what makes the bindable piece work so nicely.
Here's a good page explaining the whole bindable concept.
Regarding not being able to use ValueObjects because your data comes from a WebService, there's no reason you can't loop through the results from the webservice and put each item into a value object or your choosing.
Nov 02, 2006 at 6:20 PM
Fixed problem with view source, should be working now.
Feb 26, 2007 at 7:20 AM
That's nonsense!
Jul 31, 2007 at 6:27 AM
thank you
Aug 01, 2007 at 6:09 PM
Is there any way to center the checkbox control in the datagrid cell?
Aug 02, 2007 at 7:54 AM
Jen, I don't think you can properly center an inline renderer, however you can center a drop-in renderer (one that exists in a separate class file). See this post on how to create a drop-in renderer.
Once you have that, simply add the following code for the 'x' attribute to the checkbox in the drop-in renderer to get it to center properly.
Dec 20, 2007 at 2:13 AM
Hi,
Thanks for the information published on your site. I used it to implement a centered check box in a grid. I completed your code in order to update the data grid provider:
The implementation of the handler was found in an example in the following page:
http://shigeru-nakagaki.com/index.cfm?Content=Flex2Samples
Best regards.
Dec 26, 2007 at 3:25 AM
Cool!
Jan 28, 2008 at 7:17 AM
Hi,
How can I use a checkbox box in place of the dropdown box to filter the datagrid? Thanks.
Jan 28, 2008 at 8:35 AM
It should be easy, switch out the controls (take a look at the source files to see where). Update the change handler (handleDeptChange) to listen to your new checkbox instead of the combobox and then apply whatever filtering logic you want based on the checkboxes value.
Feb 19, 2008 at 2:28 PM
This might be new to Flex 3, but if you add textAlign="center" to the
Thanks for the example, it help me a lot! :)
Feb 19, 2008 at 2:33 PM
D'OH! Looks like tags don't show up automatically. In my previous comment the sentence should be:
"This might be new to Flex 3, but if you add textAlign="center" to the <mx:dataGridColumn/> the checkbox will center on its own"