8 Replies Latest reply on Dec 9, 2009 4:42 PM by Flex harUI

    DataGrid column widths freak out inside SkinnableContainer

    tehxike1 Level 1

      I have a DataGrid with three columns inside a SkinnableContainer.  No matter what widths I assign them, the first two columns are about 20px and the last one fills the rest of the screen.  Wrapping the grid with a canvas made the columns start behaving again.  Is this a known issue?    

        • 1. Re: DataGrid column widths freak out inside SkinnableContainer
          Jacob G Adobe Employee

          Can you post a bug file that demonstrates this?  I tried something similar and it seemed to work as exepcted.

          • 2. Re: DataGrid column widths freak out inside SkinnableContainer
            Peter deHaan Level 4

            tehxike,

             

            The following code worked for me (build 4.0.0.12722). Can you attach a simple example here and somebody can take a look.

             

            <?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">
                <s:layout>
                    <s:VerticalLayout />
                </s:layout>
            
                <s:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />
                
                <s:SkinnableContainer>
                    <mx:DataGrid>
                        <mx:dataProvider>
                            <s:ArrayCollection>
                                <fx:Object c1="1. The" c2="Quick" c3="Brown" c4="Fox jumps over the lazy" c5="dog." />
                                <fx:Object c1="2. The" c2="Quick" c3="Brown" c4="Fox jumps over the lazy" c5="dog." />
                                <fx:Object c1="3. The" c2="Quick" c3="Brown" c4="Fox jumps over the lazy" c5="dog." />
                                <fx:Object c1="4. The" c2="Quick" c3="Brown" c4="Fox jumps over the lazy" c5="dog." />
                                <fx:Object c1="5. The" c2="Quick" c3="Brown" c4="Fox jumps over the lazy" c5="dog." />
                                <fx:Object c1="6. The" c2="Quick" c3="Brown" c4="Fox jumps over the lazy" c5="dog." />
                                <fx:Object c1="7. The" c2="Quick" c3="Brown" c4="Fox jumps over the lazy" c5="dog." />
                            </s:ArrayCollection>
                        </mx:dataProvider>
                        <!--
                        <mx:columns>
                            <mx:DataGridColumn dataField="c1" />
                            <mx:DataGridColumn dataField="c3" />
                            <mx:DataGridColumn dataField="c5" />
                        </mx:columns>
                        -->
                    </mx:DataGrid>
                </s:SkinnableContainer>
            </s:Application>
            
            
            
            
            

             

             

            Peter

            • 3. Re: DataGrid column widths freak out inside SkinnableContainer
              tehxike1 Level 1

              I did some more checking, and it looks like I only have the problem when the SkinnableContainer around the grid is using a skin.  I may be doing something wrong in the skin to be causing the problem- here it is:

               

              <?xml version="1.0" encoding="utf-8"?>
              <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
                      alpha.disabled="0.5">
                  <s:states>
                      <s:State name="normal" />
                      <s:State name="disabled" />
                  </s:states>
                 
                  <s:Rect id="backgroundRect" left="24" right="24" top="8" bottom="24"
                          topLeftRadiusX="10" topLeftRadiusY="10" topRightRadiusX="10" topRightRadiusY="10"
                          bottomLeftRadiusX="10" bottomLeftRadiusY="10" bottomRightRadiusX="10" bottomRightRadiusY="10">
                      <s:fill>
                          <s:LinearGradient rotation="90">
                              <s:GradientEntry color="#B4AAA0" />
                              <s:GradientEntry color="#B3AAA3" />
                          </s:LinearGradient>
                      </s:fill>
                  </s:Rect>
                 
                  <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0"
                           left="24" right="24" top="8" bottom="24">
                      <s:layout>
                          <s:VerticalLayout gap="0" horizontalAlign="justify" />
                      </s:layout>
                  </s:Group>
                 
              </s:Skin>
              • 4. Re: DataGrid column widths freak out inside SkinnableContainer
                Flex harUI Adobe Employee

                This is a common result if the DG is forced to layout at a small width before laying out again at a wider width.

                 

                Alex Harui

                Flex SDK Developer

                Adobe Systems Inc.

                Blog: http://blogs.adobe.com/aharui

                • 5. Re: DataGrid column widths freak out inside SkinnableContainer
                  tehxike1 Level 1

                  Why does wrapping the grid with a canvas help?  Is SkinnableContainer not dispatching some resize event that Canvas is?  Is the best practice solution to the size problem I'm having?

                  • 6. Re: DataGrid column widths freak out inside SkinnableContainer
                    Shongrunden Adobe Employee

                    I still can't reproduce the issue with your skin.  Can you post the code from the application that uses that skin?

                    • 7. Re: DataGrid column widths freak out inside SkinnableContainer
                      tehxike1 Level 1

                      Here's the simplest example that I can use to reproduce the problem:

                       

                      <?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/halo" >
                          <fx:Script>
                              <![CDATA[
                                  import mx.collections.ArrayCollection;
                                 
                                  [Bindable] private var _items:ArrayCollection;

                                  protected function creation():void
                                  {
                                      _items = new ArrayCollection();
                                      _items.source = [{a:'1',b:'2',c:'3'},{a:'4',b:'5',c:'6'}];
                                  }

                              ]]>
                          </fx:Script>
                          <mx:VBox width="100%" height="100%">
                              <mx:TabBar dataProvider="{vs}" />
                              <mx:ViewStack id="vs" width="100%" height="100%" creationPolicy="all">
                                  <mx:Canvas width="100%" height="100%" />
                                  <mx:Canvas width="100%" height="100%" creationComplete="creation()">
                                      <s:SkinnableContainer width="100%" height="100%" skinClass="SubviewSkin" >
                                          <mx:DataGrid dataProvider="{_items}">
                                              <mx:columns>
                                                  <mx:DataGridColumn dataField="a" headerText="First"/>
                                                  <mx:DataGridColumn dataField="b" headerText="Second"/>
                                                  <mx:DataGridColumn dataField="c" headerText="Third"/>
                                              </mx:columns>
                                          </mx:DataGrid>
                                      </s:SkinnableContainer>
                                  </mx:Canvas>
                              </mx:ViewStack>
                          </mx:VBox>
                      </s:Application>

                       

                      One difference here is that instead of the two small columns at the beginning, the first two columns each take up half the grid, while the third column isn't visible on the right.  Timing is definitely a factor- if the creation policy of the viewstack is changed, it works fine.  In my project the viewstack is set on auto, but there's enough going on during the creation that the same problem happens...  I'm thinking it's some sort of race condition?

                      • 8. Re: DataGrid column widths freak out inside SkinnableContainer
                        Flex harUI Adobe Employee

                        Many folks have this problem when a DG is on a secondary view of a navigator.  I think I'd just set a reasonable minWidth on the DG.

                         

                        Alex Harui

                        Flex SDK Developer

                        Adobe Systems Inc.

                        Blog: http://blogs.adobe.com/aharui