Thursday, March 14, 2013

Column Spanning with Flex Spark DataGrid - Part 2

I wrote a prior post ( http://squaredi.blogspot.com/2012/07/column-spanning-with-flex-spark.html ) when I was creating a prototype about column spanning.

I'm going to leave most of the details in that post. I have however put the column spanning into production and discovered some missing logic.

We had a service, that computed user's allocation per week for 2 months that took a long time to run, and we wanted to not lock up the UI while it was running. We wanted a lazy loading solution, that "blocked" out the cells that were not available yet.

Here is what that looked like:

Either scripts and active content are not permitted to run or Adobe Flash Player version 11.1.0 or greater is not installed.

Get Adobe Flash Player

You can hit the button at the top to stop the loading effect.

The latest code can be found at:
https://github.com/dshefman/FlexSparkDataGridSpannableColumns


There were a couple of things that I discovered was missing on ColumnSpanningGridItemRenderer:

  1. Setting the new data to a cell needed to reset the expanded cell
  2. I created a function  called getSpanData() that by default returns data, but could be overwritten if there were nested data structures that was the span data
  3. I added bubbling events, so that the grid could respond to spanning and non-spanning changes as well. 

****Performance Warning*****

There is a performance hit with this spanning solution. You can see it when you scroll. The calculations to determine if spanned and then to reparent and reposition the span takes a toll. Especially if there are alot of spans. For us, that was an acceptable solution, especially since we could rationalize that "it was loading", so of course it is busy doing other things :) 

If you can make it faster, please contribute back on Git.