11 Replies Latest reply on Jun 27, 2011 1:55 PM by iamcootis

    Datagrid not being drawn completely after transition

    iamcootis Level 1

      I have a view that has two states. One view contains content and the other contains a datagrid. When I switch between the two states, I have a move transition that slides one view onto the screen while the other slides off.  A problem occurs with the datagrid. If its dataProvider already has some values before it is shown on the screen, it will appear blank when it finally stops in the middle of the screen. For some reason it quits drawing and doesn't refresh when it stops. I have to manually refresh the datagrid to get values to appear.

       

      What can I do to make sure the datagrid refreshes when it stops?

        • 1. Re: Datagrid not being drawn completely after transition
          Flex harUI Adobe Employee

          Do the column headers show, but not the cells or not even the column

          headers?

          • 2. Re: Datagrid not being drawn completely after transition
            iamcootis Level 1

            The column headers are showing, but there are no cells. Just the columns across the top.

            • 3. Re: Datagrid not being drawn completely after transition
              Flex harUI Adobe Employee

              Can you reproduce the problem in a simple test case?  If so, post it.

              • 4. Re: Datagrid not being drawn completely after transition
                iamcootis Level 1

                <?xml version="1.0" encoding="utf-8"?>
                <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                               xmlns:s="library://ns.adobe.com/flex/spark"
                               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="init()">
                    <fx:Declarations>
                        <!-- Place non-visual elements (e.g., services, value objects) here -->
                    </fx:Declarations>
                    <fx:Script>
                        <![CDATA[
                            import mx.collections.ArrayCollection;
                           
                            [Bindable]
                            public var gamesData:ArrayCollection;
                           
                            public function init():void{
                                gamesData = new ArrayCollection();
                                gamesData.addItem({name: "World of Warcraft",
                                    creator: "Blizzard", publisher: "Blizzard"});
                                gamesData.addItem({name: "Halo",
                                    creator: "Bungie", publisher: "Microsoft"});
                               
                               
                                gamesData.addItem({name: "Gears of War",
                                    creator: "Epic", publisher: "Microsoft"});
                            }
                           
                            public function btnSlideClick():void{
                                if(currentState == "TestView"){
                                    setCurrentState('slideToTestBrowser');
                                    return;
                                }
                                if(currentState == "TestBrowser"){
                                    setCurrentState('slideToTestView');
                                    return;
                                }
                            }
                           
                        ]]>
                    </fx:Script>
                    <s:transitions>
                        <s:Transition fromState="TestView" toState="slideToTestBrowser">
                            <s:Parallel effectEnd="currentState = 'TestBrowser'">
                                <s:children>
                                    <s:Move id="hideView1Effect"
                                            target="{testView}" xTo="{-testView.width}" duration="100" />
                                    <s:Move id="viewShow2Effect"
                                            target="{testBrowser}" xFrom="{testBrowser.width}" xTo="0" duration="300" />
                                </s:children>
                            </s:Parallel>
                        </s:Transition>
                        <s:Transition fromState="TestBrowser" toState="slideToTestView">
                            <s:Parallel effectEnd="currentState = 'TestView'">
                                <s:children>
                                    <s:Move id="showView1Effect"
                                            target="{testView}" xFrom="{-testView.width}" xTo="0" duration="100" />
                                    <s:Move id="hideView2Effect"
                                            target="{testBrowser}" xTo="{testBrowser.width}" duration="300" />
                                </s:children>
                            </s:Parallel>
                        </s:Transition>
                    </s:transitions>
                   
                    <s:states>
                        <s:State name="TestView" />
                        <s:State name="TestBrowser"/>
                        <s:State name="slideToTestView" stateGroups="slideStates"/>
                        <s:State name="slideToTestBrowser" stateGroups="slideStates"/>
                    </s:states>
                   
                    <s:Group id="main" x="0" y="61" height="546" width="1000">
                        <s:layout>
                            <s:BasicLayout/>
                        </s:layout>
                        <s:Group id="testView" includeIn="TestView, slideStates" color="blue" width="1000" height="550">
                            <s:Label text="Inside Test View"/>
                        </s:Group>
                        <!--<views:TestBrowser id="testBrowser" includeIn="TestBrowser, slideStates"/>-->
                        <s:Group id="testBrowser" includeIn="TestBrowser, slideStates" color="red" width="1000" height="550">
                            <s:Label text="Inside Test Browser"/>
                            <mx:AdvancedDataGrid id="dgTest" dataProvider="{gamesData}" sortableColumns="true" width="100%" height="100%"
                                                 headerHeight="38" rowHeight="25" editable="false"  dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"
                                                 allowMultipleSelection="true">
                                <mx:columns>
                                    <mx:AdvancedDataGridColumn headerText="Game Name" dataField="name"/>
                                    <mx:AdvancedDataGridColumn headerText="Creator" dataField="creator"/>
                                    <mx:AdvancedDataGridColumn headerText="Publisher" dataField="publisher"/>
                                </mx:columns>
                            </mx:AdvancedDataGrid>
                        </s:Group>
                        <s:Button id="btnSlide" label="Slide" click="btnSlideClick()" x="0" y="500"/>
                    </s:Group>
                </s:Application>

                • 5. Re: Datagrid not being drawn completely after transition
                  OzzyOGRicca Level 1

                  I am having a similar problem, except with the AdvancedDataGrid. In my case, it can expand all rows to show the user the whole grid, and it has to resize not only the grid but the actual application, to the full measured size of the grid.

                   

                  Basically my grid is set up so that the 2nd column is a renderer which in itself is also an AdvancedDataGrid. That (call it subcolumn renderer) has 2 columns, each of which have their own renderers which are each ALSO AdvancedDataGrids. This is so that I can show 2 separate groups of data side by side.

                   

                  That all works great, but one of my sub column renderers always shows up with just the header rows, and where the cells should be it's just white. No cell borders, no text, just white. If I close/reopen one of the rows, all of them refresh and show right. If I move one of the columns in one of the rows, that row will refresh but the rest are unaffected.

                  • 6. Re: Datagrid not being drawn completely after transition
                    Flex harUI Adobe Employee

                    Seems to work on Flex 4.5.  I start the app, hit the button, see 3 rows of

                    data.

                    • 7. Re: Datagrid not being drawn completely after transition
                      iamcootis Level 1

                      This is a very small part of a much larger application that is using 4.1. Upgrading to 4.5 isn't possible for us at the moment. Is there no work-around for the MX AdvancedDataGrid?

                      • 8. Re: Datagrid not being drawn completely after transition
                        Flex harUI Adobe Employee

                        I think there is.  I swear I already answered this question, but I can't

                        find the old post.

                         

                        I am able to reproduce the problem in 4.1.  I'll try to figure out the

                        workaround again.

                        • 10. Re: Datagrid not being drawn completely after transition
                          Flex harUI Adobe Employee

                          Try making this change:

                           

                                  <s:Transition fromState="TestView" toState="slideToTestBrowser">

                                      <s:Parallel effectEnd="currentState = 'TestBrowser';

                          dgTest.enabled = false; dgTest.enabled = true">

                           

                          Toggling enabled should set a flag that fixes the problem.

                          • 11. Re: Datagrid not being drawn completely after transition
                            iamcootis Level 1

                            Thanks for your help. This worked.