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

    Custom DataGrid and Design Mode

    little_MASTER

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

                {

                     //super();

                }

                override protected function createChildren() : void

                {

                     super.createChildren();

                     //icon

                     iconColumn = new DataGridColumn("iconColumn");

                     iconColumn.headerText = "";

                     iconColumn.dataField = "icon";

                     iconColumn.width = 16;

                     iconColumn.sortable = false;

                     iconColumn.resizable = false;

                     iconColumn.draggable = false;

                     //name

                     nameColumn = new DataGridColumn("nameColumn");

                     nameColumn.headerText = "Name";

                     nameColumn.dataField = "name";

                     nameColumn.width = 120;

                     nameColumn.draggable = false;

                     //ext

                     extColumn = new DataGridColumn("extColumn");

                     extColumn.headerText = "Ext";

                     extColumn.dataField = "ext";

                     extColumn.width = 40;

                     extColumn.draggable = false;

                     //size

                     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];

                     }

                     return;

                }

                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();

                     nf.thousandsSeparatorTo=",";

                     nf.useThousandsSeparator=true;

                     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

          Hi,

           

          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.

           

          Mike

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

            Hi!

            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!