Let’s suppose you are displaying hierarchical data in the advanced data grid, but your child data has different properties depending on its parent. For example, you might be displaying the departments of a store with different products having different properties – a camera has a sensor type and a television has a display type.
Here’s a little demonstration of how you can create dynamic headers at the parent level to solve this. It’s a bit hacky, but works.
I have two data types – a LineItem, which is my product, and a Department, which, surprisingly is my department. Both types have ‘abstract’ properties, elegantly named columnA, columnB, etc. At the LineItem level, these properties hold the type specific data and at the Department level, these properties are actually getter functions that return a header string for that type.
For example, my columnB getter looks like this:
public function get columnB():String
{
var returnString:String = ''
if (this.isOpen)
{
switch (this.type)
{
case CAMERA:
returnString = "Lens"
break
case TELEVISION:
returnString = "Display Type"
break
case PETS:
returnString = "Favourite Food"
break
default:
returnString = 'Unknown Department Type!'
break
}
}
return returnString
}
I also wanted to hide the headers when the department row was collapsed, so naughtily, the advanced data grid sets the department’s isOpen property when the user expands or collapses the row.
The application is available here - right click for the source code.
View comments