OpenFlux: Custom Expanding DataGridRow (view source enabled)

Ryan Campbell — Sat, 31 Jan 2009 18:29:25 +0000

The current project I'm on in the mockups shows a DataGrid component that requires the ability to expand the row height to show more details on the selected item. Although this sounds simple to do, the Flex DataGrid component is a beast and if this isn't something you've been tasked before you're probably scratching your head on how to get started.

After our conversation on different possible ways to approach this task, I wondered how easy this would be to do with the OpenFlux DataGrid. My solution is simply a custom view for the DataGridRow that expands the height based on mouse over/selection.

I've included an example below with view source enabled.

OpenFlux DataGrid Component (with view source)

Ryan Campbell — Thu, 22 Jan 2009 20:53:19 +0000

I previously wouldn't have even thought of developing my own DataGrid component from scratch but with OpenFlux's help it's super easy (Or at least easy enough to want to attempt it). Over the last couple days I've spent my spare time developing an extremely flexible DataGrid component and if you view source, compared to the standard Flex DataGrid, you'll see there isn't a lot of code behind it.

The component is actually a grouping of multiple sub components including DataGridColumn, DataGridHeader, DataGridRow, DataGridCell which all extend either List or ListItem giving instant selection and drag/drop functionality. You can easily hook up your own custom controllers and views to add any functionality you desire.

Be sure to play around with the example below and view source to see how it all works. My only note is I'm having some SVN issues so this isn't yet committed to the OpenFlux project.

Ryan Campbell » DataGrid

OpenFlux: Custom Expanding DataGridRow (view source enabled)

OpenFlux DataGrid Component (with view source)