2 Replies Latest reply on Aug 14, 2006 3:54 PM by papalarge

    Slow Render on Datagrids

    papalarge
      Not sure if it's my code or what, but I'm having to wait upwards of 5-7 seconds for a datagrid I have to render. Code is below... obviously, there's a bit of data in there, but still it seems like too much time being used. Below are what the columns look like... sorry if it doesn't look too pretty.

      I've tried removing the columns with the repeaters, and it helps the speed a little bit. But it still seems like Flex datagrids just take a long time to render... not a whole lot of data in the datagrid, and still taking a second or two to render, even when removing all custom renderers and repeaters.

      FYI... the repeater component repeats no more than 6 times per row... and I have 14 rows of data coming in currently. I'm using an HTTPService as a dataprovider, returning as xml format. This isn't the slow-down, as I've also tried creating an xml object and using the same data... just as slow.

      Any help would be GREATLY appreciated.

      ---------------------------------------------------------

      <mx:columns>
      <mx:DataGridColumn dataField="@Count" width="30" textAlign="center" sortable="false" headerText="" color="#cccccc" paddingLeft="10"/>
      <mx:DataGridColumn dataField="@Name" headerText="DOCTYPE" color="#ccffff" paddingLeft="10" headerRenderer="components.RendererDisplayHeader" />
      <mx:DataGridColumn headerText="DISPLAY LABEL" headerStyleName="displayHeader" sortable="false">
      <mx:itemRenderer>
      <mx:Component>
      <mx:VBox>
      <mx:Repeater id="rpIndex" dataProvider="{XMLList(data).Index}">
      <mx:Canvas height="15">
      <mx:Image source="../images/checkmark.gif" top="4" verticalAlign="bottom" visible="{XMLList(rpIndex.currentItem).@SpecialIndex == '1'}" />
      <mx:Text text="{XMLList(rpIndex.currentItem).@DisplayName}" left="10"/>
      </mx:Canvas>
      </mx:Repeater>
      </mx:VBox>
      </mx:Component>
      </mx:itemRenderer>
      </mx:DataGridColumn>
      <mx:DataGridColumn headerText="DATABASE FIELD" sortable="false" headerStyleName="displayHeader">
      <mx:itemRenderer>
      <mx:Component>
      <mx:VBox paddingLeft="10">
      <mx:Repeater id="rpIndex2" dataProvider="{XMLList(data).Index}">
      <mx:Text text="{XMLList(rpIndex2.currentItem).@IndexName}" height="15"/>
      </mx:Repeater>
      </mx:VBox>
      </mx:Component>
      </mx:itemRenderer>
      </mx:DataGridColumn>
      <mx:DataGridColumn headerText="INPUT" width="60" dataField="@Input" sortable="false" paddingLeft="0" textAlign="center" headerRenderer="components.RendererDisplayHeader" />
      <mx:DataGridColumn headerText="SEARCH" width="70" dataField="@Search" sortable="false" headerRenderer="components.RendererDisplayHeader" paddingLeft="0" textAlign="center"/>
      <mx:DataGridColumn width="90" sortable="false" headerStyleName="displayHeader">
      <mx:itemRenderer>
      <mx:Component>
      <mx:HBox>
      <mx:LinkButton label="edit"/>
      <mx:LinkButton label="del"/>
      </mx:HBox>
      </mx:Component>
      </mx:itemRenderer>
      </mx:DataGridColumn>
      </mx:columns>
        • 1. Re: Slow Render on Datagrids
          Flex harUI Adobe Employee
          DataGrid performance is roughly bound to the number of objects created and the complexity of the objects created. You have 14 rows * 7 columns = 98 cells. Now if some of the cells contain 6 images and containers etc, all driven off repeaters, you can do the math and see that it starts to get expensive fast.

          I would start optimizing in a couple of ways. First, I would definitely embed the .GIF, loading it as an external image several times is wasteful. Second, I would remove as many HBoxes and VBoxes as possible. The two link buttons don't need to be in an HBox, you can create an custom UIComponent subclass to house them and size them. HBox (and VBox) have general purpose measure-the-children code you don't really need.
          • 2. Re: Slow Render on Datagrids
            papalarge Level 1
            Nice... thanks for the reply. A couple things I noticed as I was trying to optimize this... several of which you mentioned in your post.

            1) I was using a function setting height of the datagrid, so that all rows were displayed. This eliminated the built-in paging functionality that a datagrid offers, speeding up the initial load-time. As soon as I set the datagrid to be a fixed height, it enormously helped the performance

            2) Children of children, especially involving hboxes, canvases, and vboxes take time to process and measure the heights and widths. I have too much nested.

            Thanks for the help... another article that helped me was a tip from Adobe