1 person found this helpful
The Flex Datagrid is unfortunately not available for use in Flash Catalyst. This is due to the fact that this component has not been upgraded to the new Spark architecture. With that said, you can recreate a DataGrid like component using the Data List. It will not have headers like the DataGrid, but it does support multiple columns (that can contain both text and images),as well as scrolling. Here is a nice intro to the Data list on AdobeTV: http://tv.adobe.com/watch/learn-flash-catalyst-cs5/using-a-data-list-to-define-repeating-e lements/
As for starting a project in Flash Builder, then opening it in Flash Catalyst, that workflow is currently not supported as well. I know the team wants to enable this, but in the current version you can only go from Flash Catalyst to Flash Builder. This means that you are limited to the components that are supplied with Flash Catalyst, or create your own custom components to recreate the missing item, or once the design is ready for transition to Flash Builder, adding the component at that time.
Mind giving me a refresher on how to add more columns?
edit... simply add another layer item, right click, and add to design time data. Answered myself =)
I can't seem to add columns as you suggest - I tried adding a second data list item to the layer but that doesn't seem to work. What am I missing?
I got my columns and row mixed up. If I recall correctly you can add more rows to the datalist in the Design Time Data panel, but not columns. So, you will have to recreate your data list with the new column in place. There is a way to reduce your pain in doing this. Select the datalist that you want to edit. Right-click on it, and choose Revert Component to Artwork. You can now add the new column element next to the other items that make up the repeating element. Now recreate the datalist component in the same manner you did the first time, the new column should now be available in the DTD panel.
Hope this helps.
You can add a column to an existing data list. Select your data list component, and double-click it to enter edit-in-place mode; depending on your datagrid, double-click again until you get to the Repeated Item. Once you're at the Repeated Item, you can add an additional graphic or text item. Here's a quick screengrab of a super simple example (I added the "FB" graphic):
Once you add a graphic (or text item), the HUD gives you the option to "Add Image to Design Time Data" (or "Add Text to Design Time Data").
Awesome - perfect! Thanks Kim.
Hi @Kim Isola with your example above what would be the best way to add DataGrid column headers? Would need to have the same functionality as a true DataGrid - ie control to enable data sorting by double clicking.
Well I can think of some solutions that might work. A lot depends on the amount of data you are using. These solutions might be more effort to fake in Flash Catalyst.
1) Turn the Data List into a custom component. This will give you 20 states to work with, which you will need. Assuming you only want single column sorting, then create a series of buttons that will act as the header for the datagrid, then link them to specific states that have NEW data lists with the data pre-sorted. You will have to make NEW lists for each sort. Depending on the number of columns, you may not have enough states to fake it.
2) The next thought would be still use buttons as header elements, but write some ActionScript to handle the sorting. If you are comfortable with ActionScript, this might a useful solution if it is small enough
3) Replace it with a real Spark Datagrid in Flash Builder. But this might throw a wrench into roundtriping, but you would have all the functionality.
Hope this helps some,
Thanks Chris. Option 3 is probably the best way to do it. Flash Builder does give some skinning and CSS options if I needed to change the look and feel etc.