4 Replies Latest reply on May 3, 2011 2:50 AM by flex4

    Datagrid smooth scrolling.. Don't want default row jump behaviour..

    flex4 Level 2

      Hi All,

       

            I am displaying large amount of data and each row contains itemrenderer Text. and this Text control displays large amount of data with in that... Whats the problem here is When we scroll vertically it goes jump into another row with showing total data.. I think this is a default property of datagrid. I just want avoid that and I need smooth scrolling of rows.. Can any one have any ideas about this.. any help can appriciable..

       

      Thanks

      Ram

        • 1. Re: Datagrid smooth scrolling.. Don't want default row jump behaviour..
          Flex harUI Adobe Employee

          Spark DataGrid has smooth scrolling.  There is an example on my blog of

          adding smooth scrolling to a List that should work for MX DataGrid as well.

           

          -

          Alex Harui

          Flex SDK Team

          Adobe System, Inc.

          http://blogs.adobe.com/aharui

          • 2. Re: Datagrid smooth scrolling.. Don't want default row jump behaviour..
            flex4 Level 2

            H Alex.

             

                    Thank you very much for your help .. Can you tell me when did you post that sample exactly.. It is very helpfull to me..

             

             

            Thanks

            Ram

            • 3. Re: Datagrid smooth scrolling.. Don't want default row jump behaviour..
              Flex harUI Adobe Employee

              If you go to my blog and search for "smooth scrolling" you should find it.

              • 4. Re: Datagrid smooth scrolling.. Don't want default row jump behaviour..
                flex4 Level 2

                Hi Alex,

                 

                       That was great job. You have implemented smooth scrolling for List..  Based upon that I have implemented the same in datagrid also..But I am facing couple of issues...

                 

                    1.  I have Item renderer Text.. With in that text I am displaying almost 90 records and it has a huge height. Accordingly the row height must change .. But what happend in my case is the data is overlapped on the second row.. the row height changes to certain height. after that it is not expanding.. records are displaying and overlapped on the second row and if it still lengthy it displayed on the third row also... so How can I solve this issue.. The row height must vary with the itemrenderer..

                 

                2. Second one is If I scroll vertically it is scrolling smoothly fine. But If I release the mouse the scroller going to Row end position or row starting position..

                 

                        I just want to fix the scroller position where user releases the Mouse from the vertical scrollbar...

                 

                 

                      Can you please help me on this .. It is urgent  ..... I am posting my Datagrid code here...

                 

                 

                package view.components.grid
                {
                    import flash.display.DisplayObject;
                    import flash.events.Event;
                   
                    import mx.controls.Alert;
                    import mx.controls.DataGrid;
                    import mx.events.ScrollEvent;
                    import mx.events.ScrollEventDetail;
                   
                    public class CustomGrid extends DataGrid
                    {
                        private var fudge:Number;
                        public function CustomGrid()
                        {
                            super();
                            offscreenExtraRowsOrColumns = 2;
                        }
                        override protected function configureScrollBars():void
                        {
                            super.configureScrollBars();
                            if (verticalScrollBar)
                                verticalScrollBar.lineScrollSize = .125;  // should be inverse power of 2
                        }
                        override public function get verticalScrollPosition():Number
                        {
                            //Alert.show("You are in vertical scroll Position handler");       
                            if(!isNaN(fudge))
                            {
                                var vsp:Number = super.verticalScrollPosition + fudge;
                                fudge = NaN;
                                return vsp;
                            }
                            return Math.floor(super.verticalScrollPosition);
                        }
                        override protected function scrollHandler(event:Event):void
                        {
                            // going backward is trickier.  When you cross from, for instance 2.1 to 1.9, you need to convince
                            // the superclass that it is going from 2 to 1 so the delta is -1 and not -.2.
                            // we do this by adding a fudge factor to the first return from verticalScrollPosition
                            // which is used by the superclass logic.
                            var last:Number = super.verticalScrollPosition;
                            var vsp:Number = verticalScrollBar.scrollPosition;
                            if (vsp < last)
                            {
                                if (last != Math.floor(last) || vsp != Math.floor(vsp))
                                {
                                    if (Math.floor(vsp) < Math.floor(last))
                                    {
                                        fudge = Math.floor(last) - Math.floor(verticalScrollBar.scrollPosition);
                                        trace(last.toFixed(2), vsp.toFixed(2), fudge);
                                    }
                                }
                            }
                           
                            super.scrollHandler(event);
                            var pos:Number = super.verticalScrollPosition;
                            // if we get a THUMB_TRACK, then we need to calculate the position
                            // because it gets rounded to an int by the ScrollThumb code, and
                            // we want fractional values.
                            if (event is ScrollEvent)
                            {
                                var se:ScrollEvent = ScrollEvent(event);
                                if (se.detail == ScrollEventDetail.THUMB_TRACK)
                                {
                                    if (verticalScrollBar.numChildren == 4)
                                    {
                                        var downArrow:DisplayObject = verticalScrollBar.getChildAt(3);
                                        var thumb:DisplayObject = verticalScrollBar.getChildAt(2);
                                        pos = (thumb.y - downArrow.height) / (downArrow.y - thumb.height - downArrow.height) * maxVerticalScrollPosition;
                                        // round to nearest lineScrollSize;
                                        pos /= verticalScrollBar.lineScrollSize;
                                        pos = Math.round(pos);
                                        pos *= verticalScrollBar.lineScrollSize;
                                        //trace("faked", pos);
                                    }
                                }
                            }
                            var fraction:Number = pos - verticalScrollPosition;
                            fraction *= rowHeight;
                            //trace("was", listContent.y.toFixed(2));
                            listContent.move(listContent.x, viewMetrics.top + listContent.topOffset - fraction);
                            //trace("now", listContent.y.toFixed(2), fraction.toFixed(2), listItems[0][0].data.lastName);
                           
                        }
                    }   
                }