11 Replies Latest reply on May 11, 2011 5:53 AM by Ifti-12

    Help...!Advance datagrid issue ?

    Amit Flexy

      Hi,

       

      In my project we are tring to create a Spreadsheet in Flex.(so we are using advance datagrid)

      I am using a AS3 class which extends mx.controls.AdvancedDataGrid for overridng require method.

       

      I m tring to create vertical and horizontal lines on specific conditions.

      I am able to achieve it but unfortunately some issue occured (when we use scroll) which I m unable to resolve it.

       

      As per project requrement we want vertical & horizontal lines to be drawn on specific conditions. So I override two methods i.e. drawVerticalLine & drawHorizontalLine..

      Ultimately I am able to got what I was expecting but when I user scrolls it the does not scroll or move the lines (look like they are fixed) but as per requrement that lines also needs to be moved with the data (like MS Excel).

       

      Please see sample code.      

       

      override protected function drawVerticalLine(s:Sprite, colIndex:int, color:uint, x:Number):void
              {       
                  //colIndex = 4
                  var object:Object = indexToItemRenderer(colIndex).data;
                  var grpVertical:Graphics = s.graphics;
                  var localColor:uint;
                 
                  if((_columnHeaderArrColl.getItemAt(colIndex) as ColumnHeaderVO).booleanMetadata == true)
                  {
                      grpVertical.lineStyle(5, 0xFF9966);
                      localColor = 0xFF9966;
                  }else
                  {
                      grpVertical.lineStyle(1, color);
                      localColor = color;
                  }
                  grpVertical.moveTo(x, 0);
                  grpVertical.lineTo(x, 0);
                 
                  super.drawVerticalLine(s,colIndex,localColor, x);
              }

       

       

      Please help to resove this issue.

       

      Thanks in advance

      Regards

      Amit Dhok

      script.amit@gmail.com

        • 1. Re: Help...!Advance datagrid issue ?
          miguel8312 Level 3

          This looks like an interesting problem would you mind posting the datagrid code so that i can help you debug... are just using this class as n item render?

          • 2. Re: Help...!Advance datagrid issue ?
            Amit Flexy Level 1

            Yes sure...

             

            Your are correct I am using custom renderer as Label for same.

             

            here goes my code:

             

            //--------------------------------------  Datagrid MXML code starts  here --------------------------------------  //

             

            <actionscript:CustomAdvancedDataGrid

            id="advDataGrid" editable="false"

            dataprovider="{dataArrayCollection}"

            height="80%"

            width="100%"

            draggableColumns="false"

            horizontalScrollPolicy="auto" verticalScrollPolicy="auto"

            verticalGridLines="true" horizontalGridLines="true"

            doubleClickEnabled="true"

            allowMultipleSelection="true"

            selectionMode="multipleRows"

            sortExpertMode="true"

            alternatingItemColors="[#FFFFFF,#FFFFFF]"

            sortableColumns="false" itemClick="itemClickedHandler(event);"

            lockedColumnCount="1" >

            </actionscript:CustomAdvancedDataGrid>

             

            //--------------------------------------  Datagrid MXML code ends here --------------------------------------  //

            //--------------------------------------  CustomAdvancedDataGrid class start here --------------------------------------  //

             

            package com.actionscript

            {

             

            public class CustomAdvancedDataGrid extends mx.controls.AdvancedDataGrid

            {

            private var _columnHeaderArrColl:ArrayCollection;

             

            public function CustomAdvancedDataGrid()

            {

            super();

            }

             

            //--------------------------------------------------------------------------

            //  this method is to draw HorizontalLine in grid

            //--------------------------------------------------------------------------

             

            override protected function drawHorizontalLine(s:Sprite, rowIndex:int, color:uint, y:Number):void {

             

            var cellDataVO:CellDataVO = (indexToItemRenderer(rowIndex).data as Array)[0];

            var grpHorizontal:Graphics = s.graphics;

             

            if(cellDataVO.booleanEditable==true)

            {

            grpHorizontal.lineStyle(1,0xFF9966);

            }else

            {

            grpHorizontal.lineStyle(1,color);

            }

            grpHorizontal.moveTo(0, y);

            grpHorizontal.lineTo(width, y);

            }

             

             

            //--------------------------------------------------------------------------

            //  this method is to draw VerticalLine in grid

            //--------------------------------------------------------------------------

             

            override protected function drawVerticalLine(s:Sprite, colIndex:int, color:uint, x:Number):void

            {

            super.drawVerticalLine(s,colIndex,color, x);

             

            var grpVertical:Graphics = s.graphics;

            if((_columnHeaderArrColl.getItemAt(colIndex) as ColumnHeaderVO).booleanMetadata == true)

            {

            grpVertical.lineStyle(1, 0xFF9966);

            }else

            {

            grpVertical.lineStyle(1, color);

            }

            grpVertical.moveTo(x, y);

            grpVertical.lineTo(x, height);

            super.drawVerticalLine(s,colIndex,color, x);

             

            }

             

             

             

            //--------------------------------------------------------------------------

            //  this method is to render column

            //--------------------------------------------------------------------------

             

            public function renderColumnsHeader(value:ArrayCollection):void

            {

            //this.columns = value;

            var columnHeaderVO:ColumnHeaderVO;

            var periodVO:PeriodVO;

            var object:Object;

            var array:Array = [];

             

            _columnHeaderArrColl = value;

             

            for(var index:int=0; index<_columnHeaderArrColl.length; index++)

            {

            columnHeaderVO = _columnHeaderArrColl.source[index] as ColumnHeaderVO;

            array.push(addColumnInGrid(columnHeaderVO));

            }

            this.columns = array;

            }

             

            //--------------------------------------------------------------------------

            //  this method is to add dynamic column

            //--------------------------------------------------------------------------

             

            private function addColumnInGrid(value:ColumnHeaderVO):CustomAdvancedDataGridColumn

            {

            var dataGridCol:CustomAdvancedDataGridColumn = new CustomAdvancedDataGridColumn();

            if(value != null)

            {

            dataGridCol.headerText = value.strColumnHeaderName;

            dataGridCol.itemRenderer = new ClassFactory(com.renderer.CellRenderer);

             

            }

            return dataGridCol;

            }

             

            }

            }

             

            //--------------------------------------  CustomAdvancedDataGrid class ends here --------------------------------------  //

             

             

             

            //--------------------------------------  class CustomAdvancedDataGridColumn ends here --------------------------------------  //

            package com.actionscript

            {

            import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;

             

            public class CustomAdvancedDataGridColumn extends mx.controls.advancedDataGridClasses.AdvancedDataGridColumn

            {

            public function CustomAdvancedDataGridColumn(columnName:String=null)

            {

            super(columnName);

            }

             

             

            }

            }

             

            //--------------------------------------  class CustomAdvancedDataGridColumn ends here --------------------------------------  //

             

             

             

            //--------------------------------------  class custom rendere starts here --------------------------------------  //

             

            package com.renderer

            {

            public class CellRenderer extends Label

            {

            private var _columnIndex:int;

             

            [Bindable]

            private var _cellVO:CellDataVO = new CellDataVO();

             

            public function CellRenderer()

            {

            super();

            this.doubleClickEnabled = true;

            this.addEventListener(MouseEvent.DOUBLE_CLICK, mouseDoubleClickedHandler);

             

            this.setStyle('borderThickness', '0');

            this.setStyle('borderAlpha', '0');

            this.setStyle('backgroundAlpha', '0');

             

            this.percentWidth = 100;

            this.percentHeight = 100;

             

            }

             

             

            private function getTextField():*

            {

            return textField;

            }

             

            private function mouseDoubleClickedHandler(evt:MouseEvent):void

            {

            this.getTextField().background = true;

            this.getTextField().backgroundColor = 0x4499CC;

            }

             

            override public function set listData(value:BaseListData):void

            {

            var advDataGridListData:AdvancedDataGridListData = value as AdvancedDataGridListData;

            this.text = (advDataGridListData.item[value.columnIndex] as CellDataVO).strDisplayText;

            super.listData = value;

            }

             

            }

             

            }

             

            //--------------------------------------  class custom rendere ends here --------------------------------------  //

             

             

            Hope this will help you to understand my issue.

            Hope to hear soon form you.

             

            Thanks in advance,

            Amit

             

             

             

             

            • 3. Re: Help...!Advance datagrid issue ?
              miguel8312 Level 3

              Flexy

              I spent the better half of the day trying to compile your code but i'm missing something perhaps a value object class. Can you post your entire project of a small sample project zip it and post it here. then i will be able to debug.  Im willing to help you with your problem but i need to be able to compile your code first and recreate the  issue :-)

              Miguel

              • 4. Re: Help...!Advance datagrid issue ?
                Amit Flexy Level 1

                Hi Miguel,


                Thanks a ton for looking into it. It is one of the major piece for me these days.
                PFA  sample source as requested.
                Looking forward to hear you soon.
                - Amit

                • 5. Re: Help...!Advance datagrid issue ?
                  miguel8312 Level 3

                  flexit i have a pretty close solution to your problem in flex 3.5 sdk im trying to convert to flex

                  4.0 sdk... do you have to have this in 4.0 sdk?  or would it be ok as

                  3.5?

                  Miguel

                  • 6. Re: Help...!Advance datagrid issue ?
                    Amit Flexy Level 1

                    Hey Miguel,

                     

                    The reson I would prefer this is in flex-4 sdk bcoz a whole project is in flex-4sdk.

                     

                    Thanks in advance.

                    Regards,

                    Amit

                    • 7. Re: Help...!Advance datagrid issue ?
                      miguel8312 Level 3

                      amit Flexy  im sure there a much more efficient way to get this done. I came up with a much

                      simpler solution  that you might be able to expand on. However I did not used the advance datagrid, i just used the regular grid. I spent aproximately 4 or 5 hours trying to get it done with the advance grid and got now where. Obviously this is not an easy one. In this attached example im taking the grid and drawing the vertical lines like excel does. Hopefully this gets you going in the right direction Thus i know this dosent get you exactly what you wanted i thought you might reconsider. I'm still curious on how i would get this done. and i think when i get a little more time I will get back to it but right now i just cant spare any more time Im sorry. If you do figuered it out please share with the rest of us.

                      here is the file that i was able to put together does not seem like much but i think you get the idea.

                       

                      http://miguelontheweb.com/AdvDataGrid.zip

                       

                      Thanks

                      Miguel

                      • 9. Re: Help...!Advance datagrid issue ?
                        miguel8312 Level 3

                        eureka i think i found the answer!!!

                        you need to add these two properties you you advance grid.

                        verticalGridLines="  verticalGridLines="true" 
                          horizontalGridLines="true"
                          verticalGridLineColor="black"
                          horizontalGridLineColor="black"

                        • 10. Re: Help...!Advance datagrid issue ?
                          Amit Flexy Level 1

                          Hi Miguel,

                           

                          I appriciate your effeorts.

                          Unfortunately this is not was I am looking for.

                           

                          I want my custom colored vertical & horizontal lines (2-3) to be moved along with the data (e.g. in ms excel border moves).

                          I m desperately looking to resolve this.

                           

                          Thanks in advance

                          - Amit

                          • 11. Re: Help...!Advance datagrid issue ?
                            Ifti-12

                            This will do the trick. It will scroll the horizontal lines as well.

                             

                             

                                    override protected function drawHorizontalLine(s:Sprite, rowIndex:int, color:uint, y:Number):void        {

                             

                                        var grpHorizontal:Graphics = s.graphics;
                                        if (!indexToItemRenderer(rowIndex)){
                                            //super.drawHorizontalLine(s, rowIndex, color, y);
                                            return;
                                        }
                                        var tmp:Object = indexToItemRenderer(rowIndex);
                                        if(indexToItemRenderer(rowIndex).data.PRODUCT2_COLOR == 1)
                                        {
                                            grpHorizontal.lineStyle(1,0xFF9966);
                                            grpHorizontal.moveTo(0, tmp.y + this.rowHeight);
                                            grpHorizontal.lineTo(width, tmp.y + this.rowHeight);
                                        }   
                                    }

                             

                                   
                                    override protected function drawVerticalLine(s:Sprite, colIndex:int, color:uint, x:Number):void
                                    {       
                                        var grpVertical:Graphics = s.graphics;
                                        grpVertical.lineStyle(3, 0xFF9966);
                                        grpVertical.moveTo(x, y);
                                        grpVertical.lineTo(x, height);
                                        super.drawVerticalLine(s,colIndex,color, x);
                                    }

                             

                                   
                                    override protected function scrollHandler(event:Event):void
                                    {
                                        this.graphics.clear();
                                        super.scrollHandler(event);
                                        this.invalidateDisplayList();
                                    }
                                   
                                    override protected function mouseWheelHandler(event:MouseEvent):void
                                    {
                                        this.graphics.clear();
                                        super.mouseWheelHandler(event);
                                        this.invalidateDisplayList();
                                    }