9 Replies Latest reply on Nov 6, 2011 3:04 PM by lelliott78

    Datagrids in Catalyst?

    Vince_LaFratta

      Does anyone have a workable solution for creating Datagrids in Catalyst?  I thought I might be able to create components in FB that I could use in FC, but no luck.

        • 1. Re: Datagrids in Catalyst?
          Chris W. Griffith Adobe Community Professional

          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.

          1 person found this helpful
          • 2. Re: Datagrids in Catalyst?
            TheHx Level 1

            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 =)

            • 3. Re: Datagrids in Catalyst?
              Vince_LaFratta Level 1

              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?

              • 4. Re: Datagrids in Catalyst?
                Chris W. Griffith Adobe Community Professional

                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.

                • 5. Re: Datagrids in Catalyst?
                  Kim Isola Adobe Employee

                  Hi!

                  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):

                   

                  newColumn.png

                   

                  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").

                   

                   

                  After you choose toaddedColumn.png add it, and your new column will show up in your Design Time data panel. Hope that helps to clarify! Thanks for posting.

                  • 6. Re: Datagrids in Catalyst?
                    Vince_LaFratta Level 1

                    Awesome - perfect!  Thanks Kim.

                    • 7. Re: Datagrids in Catalyst?
                      lelliott78 Level 1

                      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.

                      • 8. Re: Datagrids in Catalyst?
                        Chris W. Griffith Adobe Community Professional

                        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,

                         

                        Chris

                        • 9. Re: Datagrids in Catalyst?
                          lelliott78 Level 1

                          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.