4 Replies Latest reply on Jul 20, 2006 12:05 PM by

    Newbie- DataGridColumn gridlines sytles

      I'm very new to Flex so forgive me if I am missing something very basic. I've been searching throughout the documentation how I could have either different color or thickness of horizontal grid lines throughout my DataGrid. I'm trying to build an time schedule calendar book and I want the 15min increments (rows) to relate to the hour (1st of 4 rows) they are below and then have a dark line before the next hour. Is there any way to accomplsih this? Thakns in advance!
        • 1. Newbie- DataGridColumn gridlines sytles
          jtan Level 1
          You should be able to do this with a custom itemRenderer for each of your DataGridColumns. Check out this link where there is an example of creating a custom itemRenderer to change the backgroundColor of a cell. It is not exactly what you need, but its getting you closer. In the sample code's updateDisplayList function, you will probably have to draw some other lines in your renderer to make the Grid lines look thicker.

          http://www.forta.com/blog/index.cfm?mode=month&month=6&year=2006&startRow=26

          Good luck!
          Joan
          Flex SDK QA
          1 person found this helpful
          • 2. Newbie- DataGridColumn gridlines sytles
            That seems like it would work but I keep getting this error when I try to set it as the itemRenderer (via actionscript):

            var col:DataGridColumn = new DataGridColumn(columnName);
            col.itemRenderer = AppointmentBookCellRenderer;

            1067: Implicit coercion of a value of type Class to an unrelated type mx.core:IFactory.

            When I added it via mxml I got the following error:

            <mx:DataGridColumn dataField="time" backgroundColor="#83b0fc" width="40" itemRenderer="cmp:AppointmentBookCellRenderer"/>

            Initializer for 'itemRenderer': cannot parse value of type mx.core.IFactory from text 'cmp:AppointmentBookCellRenderer'.


            My renderer is pretty much the code you specified just to try it out:
            (I added the constructor and the newInstance methods to comply with the IFactory.)

            package Amicas
            {
            import mx.controls.Label;
            import mx.controls.dataGridClasses.*;
            import mx.controls.DataGrid;
            import flash.display.Graphics;
            import mx.controls.listClasses.IListItemRenderer;
            import mx.core.IFactory;
            import mx.core.UIComponent;

            public class AppointmentBookCellRenderer extends Label
            {

            public function AppointmentBookCellRenderer(){
            super();
            }

            public function newInstance():AppointmentBookCellRenderer {
            return new AppointmentBookCellRenderer();
            }

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            var g:Graphics = graphics;
            var grid:DataGrid = DataGrid(DataGridListData(listData).owner);
            var tm:String = data.time;

            if (tm.indexOf(":00") > -1)
            {
            g.beginFill(0x009900);
            g.drawRect(0, 0, unscaledWidth, unscaledHeight);
            g.endFill();
            }
            else
            {
            g.beginFill(0xFF0000);
            g.drawRect(0, 0, unscaledWidth, unscaledHeight);
            g.endFill();
            }
            }

            }
            }
            • 3. Re: Newbie- DataGridColumn gridlines sytles
              jtan Level 1
              Chris, when creating your itemRenderer in Actionscript, try to cast the itemRenderer as a ClassFactory ...

              col.itemRenderer = new ClassFactory(AppointmentBookCellRenderer);

              Joan
              1 person found this helpful
              • 4. Newbie- DataGridColumn gridlines sytles
                Thanks, that did the trick. I didn't see any way to do casting in the documentation (at least in reading what I had so far) and ActionScript is different enough from every other script/program language that I've worked with so I couldn't guess how. I really appreciate your help on this!!!

                Answer:
                ========
                > You should be able to do this with a custom itemRenderer for each of your DataGridColumns.

                var col:DataGridColumn = new DataGridColumn(columnName);
                col.itemRenderer = new ClassFactory(AppointmentBookCellRenderer);

                AppointmentBookCellRenderer:
                ---------------------------------------------
                package Amicas
                {
                import mx.controls.Label;
                import mx.controls.dataGridClasses.*;
                import mx.controls.DataGrid;
                import flash.display.Graphics;
                import mx.controls.listClasses.IListItemRenderer;
                import mx.core.IFactory;
                import mx.core.UIComponent;

                public class AppointmentBookCellRenderer extends Label
                {

                public function AppointmentBookCellRenderer(){
                super();
                }

                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                {
                super.updateDisplayList(unscaledWidth, unscaledHeight);

                var g:Graphics = graphics;
                var grid:DataGrid = DataGrid(DataGridListData(listData).owner);
                var tm:String = data.time;

                if (tm.indexOf(":00") > -1)
                {
                g.lineStyle(2, 0x400040, 1.0);
                g.moveTo(0,-3);
                g.lineTo(150,-3);
                }

                }

                }
                }