2 Replies Latest reply on Apr 20, 2010 9:56 AM by csh.cg

    incorrect rendering in AdvancedDataGrid

    csh.cg

      Hi,

       

      maybe you can have a look at the following image:

       

      http://www.fotos-hochladen.net/temp9li0vmpb.jpg

       

      It shows an AdvancedDataGrid, which has an incorrect appearance.

       

      It uses hierarchical data and has set its variableRowHeight to true.

       

      The error occurs when there is much data in the grid and after scrolling up and down several times. I don't know though, if this is the real cause.


      An itemRenderer is used as well (which might be the problem). But it is just an Text element.

       

      There are also some problems with scrolling. Sometimes it is not possible to properly scroll to the end. This probably due to the fact, that scrolling is not pixelbased but rowbased.

       

      Any ideas would be appreciated!

      Thanks

        • 1. Re: incorrect rendering in AdvancedDataGrid
          Matt Le Fevre Level 4

          are you able to post your coding for the whole advanced data grid component & the item renderer it uses?

           

          i'm guessing the problem will be somewhere in there.

           

           

          also, how is the data placed into the datagrid?

           

          is it an arraycollection binded to it?

          is it manually loaded into it?

           

          or is it just fed in from a HTTPSerivce result event?

          • 2. Re: incorrect rendering in AdvancedDataGrid
            csh.cg Level 1

            First: It is very hard to reproduce the error.

             

            Second: I at least found the cause for the scrolling error. Sometimes it didn't scroll properly to the end of the list, when much data is used and the rows are quite high. Maybe this problem is directly related to the other one.

             

            It is the itemRenderer. We use a TruncatedText control found in the internet as itemRenderer. Because we want to display "..." (truncateToFit), if the text is larger than the maximal row height.

            The behavior is caused somewhere in the while (r - l > 1) loop in the updateDisplayList.

             

            Here is a sample to see this behavior (appearently even the style in the renderer is relevant here).

             

            If you scroll down, at some point it "jumps" up again, making it unable to scroll to the bottom.

             

            Unfortunately I have no real idea how to approach this problem.

             

            Main.mxml:

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                            layout="absolute"
                            creationComplete="onCreationComplete()">

             

                <mx:Script>
                    <![CDATA[
                        import mx.collections.HierarchicalData;
                        import mx.collections.ArrayCollection;

             

                        private var source:ArrayCollection = new ArrayCollection([{name: "test1"}, {name: "test2", children: [{data: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.a"}]},
                                                                                  {name: "test3"}, {name: "test4"}, {name: "test5", children: [{data: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.b"}]},
                                                                                  {name: "test8"}, {name: "test9"}]);
                        [Bindable]
                        private var dataSource:HierarchicalData;

             

                        private function onCreationComplete():void
                        {
                            dataSource = new HierarchicalData(source);
                        }
                    ]]>
                </mx:Script>

             

                <mx:AdvancedDataGrid width="700"
                                     height="400"
                                     variableRowHeight="true"
                                     dataProvider="{dataSource}">
                    <mx:columns>
                        <mx:AdvancedDataGridColumn headerText="Name"
                                                   dataField="name" />
                        <mx:AdvancedDataGridColumn headerText="Content"
                                                   dataField="data" />
                    </mx:columns>
                    <mx:rendererProviders>

             

                        <mx:AdvancedDataGridRendererProvider depth="2"
                                                             columnSpan="2"
                                                             columnIndex="1"
                                                             renderer="Renderer">
                        </mx:AdvancedDataGridRendererProvider>
                    </mx:rendererProviders>
                </mx:AdvancedDataGrid>
            </mx:Application>

             

             

            Renderer.mxml:

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Text xmlns:mx="http://www.adobe.com/2006/mxml"
                     styleName="textRenderer"
                     truncateToFit="true"
                     xmlns:local="*">
                <mx:Style>
                .textRenderer
                {
                    font-size: 12;
                    font-family: Arial;
                }
                </mx:Style>
                <mx:Script>
                    <![CDATA[
                        import mx.controls.Text;
                        import mx.core.UITextField;
                        import mx.core.mx_internal;
                        use namespace mx_internal;
                        protected static const TRUNCATION_INDICATOR:String = "...";

             

                        override public function set text(text:String):void
                        {
                            _isHTML = false;

             

                            super.text = text;
                        }

             

                        override public function set htmlText(htmlText:String):void
                        {
                            _isHTML = true;

             

                            super.htmlText = htmlText;
                        }

             

                        protected function get truncationRequired():Boolean
                        {
                            return (textField.height < textField.textHeight + UITextField.TEXT_HEIGHT_PADDING);
                        }

             

                        override protected function updateDisplayList(w:Number, h:Number):void
                        {
                            super.updateDisplayList(w, h);

             

                            if (truncateToFit)
                            {
                                if (!_isHTML)
                                {
                                    var originalText:String = textField.text = super.text;

             

                                    if (truncationRequired)
                                    {
                                        toolTip = originalText;
                                        var l:int = 0;
                                        var r:int = textField.text.length;

             

                                        while (r - l > 1)
                                        {
                                            var median:Number = Math.floor((l + r) / 2);
                                            textField.text = originalText.substr(0, median) + TRUNCATION_INDICATOR;

             

                                            if (truncationRequired)
                                            {
                                                r = median;
                                            }
                                            else
                                            {
                                                l = median;
                                            }
                                        }

             

                                        while (truncationRequired && median > 0)
                                        {
                                            median--;
                                            textField.text = originalText.substr(0, median) + TRUNCATION_INDICATOR;
                                        }
                                    }
                                    else
                                    {
                                        toolTip = "";
                                    }
                                }
                            }
                        }

             

                        private var _isHTML:Boolean;
                    ]]>
                </mx:Script>
            </mx:Text>