3 Replies Latest reply on May 10, 2011 9:52 AM by Flex harUI

    How do I make a Grid scroll vertically without dragging the header with it?

    Enteng73

      Hi All,

       

      Been with Flex for a few months and came upon a task of trying to adjust a scrolling behaviour implicitly appointed to a Grid control. The adjustment being attempted is to not allow the header of a table we've setup get dragged during a vertical scroll.

       

      Is this doable without changing Grid to a different Flex control? If so, would appreciate the pointers...

       

      If this would be difficult to pursue in the current structure that I have -- what is/are my alternative(s)?

       

      Each representative cell of the whole grid by the way contains complex structures as well...

       

      Thanks so much in advance for any feedback...

       

      Found below is a rough make-up of what I have...

       

      <Box xmlns="http://www.adobe.com/2006/mxml" width="100%" height="100%" horizontalScrollPolicy="off" 
      verticalScrollPolicy="off" xmlns:local="*" creationComplete="load()">

      <Script>
              <![CDATA[

                 ...

              ]]>
          </Script>
             
      <Grid width="100%" height="100%" backgroundColor="#D9D9D9" verticalGap="0" horizontalGap="0">
        <GridRow height="20" verticalAlign="bottom" width="100%">
         <GridItem>

            ...
         </GridItem>

         ...

         <Repeater id="headerRepeator" dataProvider="{...}" >
            <GridItem textAlign="center" horizontalAlign="center" >

               ...

            </GridItem>

         </Repeater>

         ...

        </GridRow>

        ...

      </Grid>

      </Box>

       

      Best,

      Enteng

        • 1. Re: How do I make a Grid scroll vertically without dragging the header with it?
          Flex harUI Adobe Employee

          If you set minWIdth=0 on the Grid, doesn't the Grid show scrollbars?  You

          should have another Grid on top that contains the header.

          • 2. Re: How do I make a Grid scroll vertically without dragging the header with it?
            Enteng73 Level 1

            Hi Flex HarUI,

             

            Thanks for the feedback.

             

            Yes, I've gone up to that point now. I have a header, a body (that's been made scrollable), and a footer that's a third grid at the bottom.

             

            The new challenge now for me is how to make the columns of the header and footer align with the body's. I've tried experimenting with creationComplete and seem to be stuck on how to reference the individual elements within the Grid, e.g.

             

            <Box>

             

            <Grid id="header">

               <GridRow>

                  <Repeater>

                       <GridItem id="element">

                          ...

                       </GridItem>

                  </Repeater>

               </GridRow>

            </Grid>

            <Grid id="body">

               <GridRow>

                  <Repeater>

                       <GridItem id="element">

                          ...

                       </GridItem>

                  </Repeater>

               </GridRow>

            </Grid>

            <Grid id="footer">

               <GridRow>

                  <Repeater>

                       <GridItem id="element">

                          ...

                       </GridItem>

                  </Repeater>

               </GridRow>

            </Grid>

            </Box>

             

            What I'm trying to do is set the width of the body's GridItem elements to the header's and footer's and have resorted to doing that on creationComplete of the parent <Box> of the mxml file, e.g.

             

            creationComplete="load()"

             

            function load() : void {

               ...

             

               for (i = 0; i < element.length; i++) {

                   ...

                   element[i].width;

               }

             

            }

             

             

            Am I referring to the GridItem element incorrectly? I'm getting null on break on the loop's element variable... We're using Flash 4 IDE but our compliance is set to 3.5 due to some legacy code.

             

            Would very much appreciate some tips on how to align the columns.

             

            Thanks so much,

            Enteng

            • 3. Re: How do I make a Grid scroll vertically without dragging the header with it?
              Flex harUI Adobe Employee

              I don't use repeater, but your code look ok to me.  Try skipping repeater

              and creating the GridItems in actionscript.