5 Replies Latest reply on Oct 15, 2010 10:14 AM by Raptorjes86

    Nested Datagrids And the Failure of VariableRow Height





      With old-school data-grids, not the advanced ones (which I am unable to use here), I need to display what was literally a tree of data, only sideways.


      I got this nested system of datagrids to work with one exception, the variableRowHeights lie.


      Screenshots for evidence of the problem:

      SP variableRowheight Fail.jpg

      Here we see the four-column nested datagrid. In reality, the only datagrid is actually the first 2 columns. The other columns are the result of chained itemrenderers.


      Heres where the fun starts: The last column on the right is forced to a row height of 20. All of the other columns have variable row heights and no given dimensions (for autofit).


      I've highlighted a trouble area. The grid I'm showing you says in the South Pacific Division, Inside the South Pacific Subdivision, and insidethe South pacific REGION, there is only an Australia.




      SP variableRowheight Fail2.jpg

      Since I have vertical scrollbars off (because I want the cells to show everything and not require scrolling), If I click on S Pacific and then arrow key down, it reveals to me that there are indeed more countries hidden in the South Pacific Region.



      Why are they hidden?



      it works in some places and not others. For instance:




      All of the data n Greater Asia is fully shown and uses up as much screen real estate as it can.





      What I really want is for this behavior to work everywhere. I only want one scroll, and that one scroll sis to be on the far right to scroll through fully-expanded data. However, the datagrids are hiding data selectively. How do I make them show me what they have hidden for no good reason?




        • 1. Re: Nested Datagrids And the Failure of VariableRow Height
          Raptorjes86 Level 1

          Relevant Code:

          Main DataGrid
          <mx:DataGrid id="dgTutorials" width="100%" height="300"
                 dataProvider="{allData.OrgRoot.division}"  showHeaders="false" rowCount="{rowLimit}"
                  variableRowHeight="true" wordWrap="false"
                  paddingTop="0" paddingBottom="0">
                  <mx:DataGridColumn width="50" dataField="division" labelFunction="getTitle"/>
                  <mx:DataGridColumn width="200" id="subdivs" itemRenderer="FlexCGrid"/>
          The second column here, named subdivs, uses FlexCgrid as its itemrenderer:
          <mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml" showHeaders="false"
          initialize="init()" change="{postSelectedChange(event)}" rowCount="{rowLimit}"
          variableRowHeight="true" wordWrap="false" verticalScrollPolicy="off"
          paddingTop="-1" paddingBottom="-1">
          ...some non format-ative AS here..
              <mx:DataGridColumn labelFunction="getTitle" width="50"/>
              <mx:DataGridColumn  width="150" itemRenderer="FlexCGrid2" wordWrap="false"/>
          Where FlexCGrid2 is identical to FlexCGrid1 but targets a different part of XML data


          And so on and so forth. The only difference in FlexCgrid3 is that variableRowheight is set to false there and the row is a fixed "20" because the items rendereed by FlexCgrid3 won't have any children.

          • 2. Re: Nested Datagrids And the Failure of VariableRow Height
            Flex harUI Adobe Employee

            Here's some info I just posted that might be helpful.




            I think the challenge will be nailing down the width of the DGs and their

            columns so you can get good measurements.

            • 3. Re: Nested Datagrids And the Failure of VariableRow Height
              Raptorjes86 Level 1

              Each of the widths in my datagrids (and datagrid columns) have already been nailed down to arbitrary widths. Additionally, there is no word wrap here.


              I took a look at your example, but it looks like you're dealing with the issue of clipping text when wordWrap is enabled due to the component not knowing how 'wrapped' it is.


              My program KNOWS there are rows there, draws them in, but forces a scrollbar on them instead of just displaying the whole thing.



              I feel like it has something to do with rowCount. If I add some extra dummy rows filled with nothing (increase rowcount above numData) it appears to solve the problem. Although in an incredibly ugly way (less ugly than scrollbars).


              SP variableRowheight Fail.jpg

              Above occurs when, in the third column's datagrid (the nested, nested datagrid) has its number of rows capped at the number of items in the third column for it (IE, 3 in this situation, Papua, S. Pacific, and South Pacific)


              SP variableRowheight Fail2.jpg.

              Above occurs when that SAME column's datagrid has its nmber of rows capped at the number of items in the FOURTH column. This picture shows how it breaks some sections, but it does indeed fix the South Pacific display:


              The only scroll bar there is the global one, this pleases me.


              Now, why would it be better at calculating the height if there are more rows, but incapable of doing it if there are less?


              here is just a shot of the code I was working with to make these changes:




              EDIT: Scrolling appears to make matters much, much worse. It is probably the recycled, nested Item-Renderers. Is there a better way to make a horizontal tree than nesting Item Renderers (I could always go with parallel lists with empty slots to simulate variable row height)? I gotta admit, I'm not very good with these suckers.

              • 4. Re: Nested Datagrids And the Failure of VariableRow Height
                Flex harUI Adobe Employee

                The key point is that the renderer must report a correct measuredHeight

                based on its given explicitWidth.  DataGrid doesn't measure rows exactly, it

                takes the first row and assumes it is representative and multplies the first

                row's height by the default or explicitly set rowCount.  You will need a

                custom measure method, probably using the measureHeightOfItems formula that

                I used to size the DG exactly.


                It is also possible that your column widths haven't factored in a border


                1 person found this helpful
                • 5. Re: Nested Datagrids And the Failure of VariableRow Height
                  Raptorjes86 Level 1

                  Not that this would help anone in particular looking to solve this problem, but I changed up my approach.




                  I refashioned your Disabled-item list a bit, came up with this:





                  Which (at least in my previe won this forum) looks horribly wrong here, but it is actually pretty good. 4 Lists, their scroll's synced to the last one, and the data providers for each one are just padded to heck and back with ExcludeObjects with blank labels...



                  Edit: I also wanted to note that I had to physically disable keyboard navigation through the lists, as the compensation for the excludeobjects broke during scrolls. I highly doubt any of the users will miss this 'feature'.