3 Replies Latest reply on Feb 14, 2011 12:00 AM by Flex harUI

    Scroller and DataGrid

    rattysword

      Hello All,

         The problem I am trying solve is have scroll bars (vertical and horizontal) for a data grid  with a huge number of columns. I thought it would be good idea to use scroller since I am using flex 4. It horizotal scroll bar seems to work as expected, but the virtical scroll bar only appears at the end of the last column (see code below). So the user has to the end using the horizontal scroll bar, then find the verticall bar, then scroll it  I am hoping that somebody can point be to a solution. My searches resulted to http://blog.flexexamples.com/ , and I have tried variation of the code, y

      <?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"
                     initialize="initData()" viewSourceURL="srcview/index.html">
          <fx:Declarations>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
          <fx:Script>
              <![CDATA[
                  import mx.collections.ArrayCollection;
                  private var arr:Array = new Array();
                  [Bindable]
                  private var ac:ArrayCollection = new ArrayCollection(arr);
                  private function createObj(i:int):Object {
                      var o:Object = new Object();
                      var j:int;
                      for (j=0; j < 375; j++) {
                          o[j]="Hello "+i+" "+j;
                         
                      }
                      return o;
                  }
                  private function initData():void{
                      var i:int;
                      var j:int;
                      var o:Object;
                      for (i= 0; i < 50; i++){
                          o = createObj(i);
                          ac.addItem(o);
                      }
                  }
                 
              ]]>
          </fx:Script>

           <s:Group height="100%" id ="p" verticalScrollPosition="200" clipAndEnableScrolling="true">
                  <mx:DataGrid x="10" y="5" dataProvider="{ac}" height="85%" />       
              </s:Group>

           <s:Scroller x="10" y="10" width="90%" height="80%" viewport ="{p}" >       
           
          </s:Scroller>
         
      </s:Application>

        • 1. Re: Scroller and DataGrid
          Flex harUI Adobe Employee

          DataGrid has its own scrollbars.  Get rid of the Scroller.  If you set

          horizontalScrollPolicy="on" for the DataGrid as well as minWidth="0" and

          percentWidth="100%" what happens?

          • 2. Re: Scroller and DataGrid
            rattysword Level 1

            Thanks very much --

            Who ever you are kind stranger :).

            It works.


            In that case we do not s:scroller at all in this case.
            But why do we need the mindWidth="0" for dataGrid , if we do not do that the
            vertical scroll bar does appear all.
            Thanks again for the quick reply.

             

             

             

            <?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"
                           initialize="initData()" viewSourceURL="srcview/index.html">
                <fx:Declarations>
                    <!-- Place non-visual elements (e.g., services, value objects) here -->
                </fx:Declarations>
                <fx:Script>
                    <l-- same code as before -->
                </fx:Script>
                <!-- removed s:scroller and s:group -->
                <mx:DataGrid x="10" y="5" dataProvider="{ac}" height="85%"
            horizontalScrollPolicy="on"
                             width="90%" minWidth="0"/>
             
            </s:Application>

             

            ----- Original Message ----
            From: Flex harUI <forums@adobe.com>
            To:
            Sent: Fri, February 11, 2011 6:03:10 PM
            Subject: [Flex] Scroller and DataGrid

             

            DataGrid has its own scrollbars.  Get rid of the Scroller.  If you set
            horizontalScrollPolicy="on" for the DataGrid as well as minWidth="0" and
            percentWidth="100%" what happens?

             

            --------------------------------------------------------------
            This message was sent to: rattysword

             

            Replies to this message go to everyone subscribed to this thread, not directly
            to the person who posted the message. To post a reply, either reply to this
            email or visit the message page: http://forums.adobe.com/message/3464670#3464670

             

            To unsubscribe from this thread, please visit the message page at
            http://forums.adobe.com/message/3464670#3464670. In the Actions box on the
            right, click the Stop Email Notifications link. For more information about
            unsubscribing from the Adobe Forums, please visit
            http://kb2.adobe.com/cps/522/cpsid_52211.html

            • 3. Re: Scroller and DataGrid
              Flex harUI Adobe Employee

              If you use a % width, the minWidth is the measuredWidth which will include

              all columns.  By setting minWidth to 0 it allows the DataGrid to shrink to

              fit on the screen and then it will show scrollbars.