2 Replies Latest reply on Sep 28, 2010 9:46 AM by zeroskillz

    create buttons in a datagrid with AS3

    Rale-Kay

      Hi,

       

      i´m developing an AIR-app. So far i have finished the datagrid (filled by a database) with a search funktion and some other things. Everything is made in Flash with AS3. Now i want some buttons in the last column of the dg but without using flex. I found some tutorials in the net but they are all with flex tags which i don´t understand and i don´t want to rebuild my app completely. Does anyone know a tutorial for Flash and AS3?

       

      regards

       

      Rale

        • 1. Re: create buttons in a datagrid with AS3
          Rale-Kay Level 1

          Does noone has an idea or a tip for me?

          • 2. Re: create buttons in a datagrid with AS3
            zeroskillz Level 3

            Sure, here's what I found a while back for CheckBoxes...I edited it for Buttons.


            Overview

            Make sure you have a button in the document library.

            You need to create a cutom cell rederer class to make the grid cells with buttons in them.

            You then need to add a column to your grid which uses the custom renderer.


            Custom Renderer Class

            Copy this into a new ActionScript file. Save it as ButtonCell.as in the same directory as your .fla file.

            package
            {
                import fl.controls.Button;
                import fl.controls.listClasses.ICellRenderer;
                import fl.controls.listClasses.ListData;
                import flash.events.Event;
                import flash.events.MouseEvent;
                
                public class ButtonCell extends Button implements ICellRenderer
                {
                    private var _listData:ListData;
                    private var _data:Object;
                    
                    public function ButtonCell()
                    {
                        super();
                        addEventListener(MouseEvent.CLICK, onButtonClick);
                    }
                    
                    public function set data(d:Object):void
                    {
                        _data = d;
                    }
                    
                    public function get data():Object
                    {
                        return _data;
                    }
                    
                    public function get listData():ListData
                    {
                        return _listData;
                    }
                    
                    public function set listData(value:ListData):void 
                    {
                        _listData = value;
                    }
            
                    override public function get selected():Boolean 
                    {
                        return _selected;
                    }
            
                    override public function set selected(value:Boolean):void 
                    {
                        
                    }
                    
                    public function onButtonClick(event:MouseEvent)
                    {
                        // do something
                    }
                }
            }
            
            
            

             

             

            In your .fla file make sure you have the imports:

            import fl.controls.DataGrid;
            import fl.controls.dataGridClasses.DataGridColumn;
            import fl.controls.listClasses.CellRenderer;
            import ButtonCell;
            

             

            Then, in your .fla file use this to create the column (where 'myDataGrid' is the name of your dataGrid instance):

             

            var btnCol:DataGridColumn = new DataGridColumn("buttonColumnTitle");
            btnCol.cellRenderer = ButtonCell;
            btnCol.editable = false;
            myDataGrid.addColumn(btnCol);
                             
            

             

            To set the button label, just set the text like you would any other dataGrid cell:

            myDataGrid.addItem({buttonColumnTitle:"Button Label"})

             

             

            HTH!

            -Ted