2 Replies Latest reply on Jun 7, 2010 6:00 AM by little_MASTER

    Custom DataGrid and Design Mode


      Hi all!

      I'm trying to extend DataGrid with some extra features:


      I have started with this:




      package tj.inz.comp


           import mx.controls.DataGrid;

           import mx.controls.dataGridClasses.DataGridColumn;

           import mx.formatters.NumberFormatter;


           public class FileList extends DataGrid


                public var iconColumn:DataGridColumn;

                public var nameColumn:DataGridColumn;

                public var extColumn:DataGridColumn;

                public var sizeColumn:DataGridColumn;


                public function FileList()




                override protected function createChildren() : void




                     iconColumn = new DataGridColumn("iconColumn");

                     iconColumn.headerText = "";

                     iconColumn.dataField = "icon";

                     iconColumn.width = 16;

                     iconColumn.sortable = false;

                     iconColumn.resizable = false;

                     iconColumn.draggable = false;


                     nameColumn = new DataGridColumn("nameColumn");

                     nameColumn.headerText = "Name";

                     nameColumn.dataField = "name";

                     nameColumn.width = 120;

                     nameColumn.draggable = false;


                     extColumn = new DataGridColumn("extColumn");

                     extColumn.headerText = "Ext";

                     extColumn.dataField = "ext";

                     extColumn.width = 40;

                     extColumn.draggable = false;


                     sizeColumn = new DataGridColumn("sizeColumn");

                     sizeColumn.headerText = "Size";

                     sizeColumn.dataField = "size";

                     sizeColumn.width = 70;

                     sizeColumn.setStyle("textAlign", "right");

                     sizeColumn.draggable = false;

                     if (!columns || columns.length == 0)


                          columns = [iconColumn, nameColumn, extColumn, sizeColumn];




                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void


                     super.updateDisplayList(unscaledWidth, unscaledHeight);


                //size formatter

                private function sizeLabelFunction(item:Object, column:DataGridColumn):String


                     if (item.type != 'file') //when item is directory or back element


                          return "";


                     var fileSize:Number = Number(item.size);

                     var nf:NumberFormatter = new NumberFormatter();



                     return nf.format(fileSize);







      It works fine (for now) but I have problem with it in Design Mode in Flex Buldier 3 and Flash Buldier.

      I'm adding some columns and I want to be able to see it in Design Mode.


      How to do this??

        • 1. Re: Custom DataGrid and Design Mode
          TeotiGraphix Level 3



          Any component extensions in actionscript will not who up in design view. You must use mxml to get components to show up.


          Sometimes you can create a Library project that is compiled into a SWC and get actionscript components to be visible. I'm not quite sure about item renderers on the DataGrid with this solution.



          • 2. Re: Custom DataGrid and Design Mode
            little_MASTER Level 1


            I have read about SWC and Library Projects and have tried it out, but I need some schema how to extend DataGrid. Which methods to override.

            For example: Where should I add columns, how to add inspectable properties, like for example visible column1 or visible column2, and then how to refresh preview in Design Mode.


            I'm searching for book about writing custom component with DataGrid example. Found one or two books on amazon, but nothing about DataGrid.


            What I'm trying to do is to add Remote Object to my DataGrid that will pull some data from server and then it will populate it.

            It is not so hard to do in standard application, but I want to try to do it inside a custom component.


            Any samples will be cool


            Thanks for help to all!