3 Replies Latest reply on Jul 21, 2016 2:55 AM by asengupta

    Moving DataGrid Scrollbar to the left side of grid

    iamcootis Level 1

      I've searched all over the internet and I have no clue where to begin with this one. Has anyone ever done this or have an idea how to do it? I'm using 4.6. Thanks.

        • 1. Re: Moving DataGrid Scrollbar to the left side of grid
          sandip p deshmukh

          Use below code:

           

          <mx:VBox width="100%" height="100%" paddingLeft="20" paddingRight="-20">

            <flex:CustomDataGrid width="100%" dataProvider="{arrayData}"

                  horizontalScrollPolicy="on" verticalScrollPolicy="on">

             <flex:columns>

              <mx:DataGridColumn headerText="Name" dataField="name" paddingLeft="20"/>

              <mx:DataGridColumn headerText="Email" dataField="email"/>

              <mx:DataGridColumn headerText="Phone" dataField="phone"/>

             </flex:columns>

            </flex:CustomDataGrid>

          </mx:VBox>

           

           

          Code for Custom DataGrid:

          public class CustomDataGrid extends DataGrid

          {

            public function CustomDataGrid()

            {

             super();

            }

           

            public override function validateDisplayList():void

            {

             super.validateDisplayList();

            

            if( verticalScrollBar && verticalScrollBar.visible ){

              verticalScrollBar.x = 0;   

             }

            }

           

          }

           

           

           

          • 2. Re: Moving DataGrid Scrollbar to the left side of grid
            iamcootis Level 1

            Thanks, but I'm using a spark Datagrid. Do you know how I would do it then?

            • 3. Re: Moving DataGrid Scrollbar to the left side of grid
              asengupta

              I have a solution but may not be neat.

               

              1. Make a copy of the spark DataGridSkin.mxml as LeftHandScrollerGridSkin.mxml

               

              2. Replace the scroller section in LeftHandScrollerDataGridSkin.mxml

              ...

                              <scroller:LeftHandScroller id="scroller" minViewportInset="1" hasFocusableChildren="false"

                                                         height="100%">

                                  <!--- @private -->

                                  <datagrid:LeftHandScrollerGrid id="grid" offsetScroller="{scroller.verticalScrollBar.width}"

                                                                 itemRenderer="spark.skins.spark.DefaultGridItemRenderer">

                                      <datagrid:gridView>

                                          <fx:Component>

                                              <s:GridView>

                                                  <s:GridLayer name="backgroundLayer"/>

                                                  <s:GridLayer name="selectionLayer"/>

                                                  <s:GridLayer name="editorIndicatorLayer"/>

                                                  <s:GridLayer name="rendererLayer"/>

                                                  <s:GridLayer name="overlayLayer"/>

                                              </s:GridView>

                                          </fx:Component>

                                      </datagrid:gridView>

                                  </datagrid:LeftHandScrollerGrid>

                              </scroller:LeftHandScroller>

              ...

               

              3. Create LeftHandScroller.as

               

              public class LeftHandScroller extends Scroller {
                  public function LeftHandScroller() {
                      super();
                  }

                  override protected function attachSkin():void
                  {
                      super.attachSkin();
                      Group(skin).layout = new LeftHandScrollerLayout();
                  }
              }

               

              4. Create LeftHandScrollerGrid.as

               

              public class LeftHandScrollerGrid extends Grid {

                  private var _offsetScroller:Number = 0;

                  [Bindable]
                  public function set offsetScroller(value:Number):void {
                      if (layout) {
                          LeftHandScrollerGridLayout(layout).offsetScroller = value;
                      }
                      _offsetScroller = value;
                  }

                  public function get offsetScroller():Number {
                      return _offsetScroller;
                  }

                  public function LeftHandScrollerGrid() {
                      super();
                      layout = new LeftHandScrollerGridLayout();
                  }
              }

               

              5. Create LeftHandScrollerLayout.as

               

              public class LeftHandScrollerLayout extends ScrollerLayout {
                  /**
                   *  @private
                   */
                  private function get vsbVisible():Boolean {
                      var vsb:ScrollBarBase = getScroller().verticalScrollBar;
                      return vsb && vsb.visible;
                  }

                  /**
                   *  @private
                   */
                  private function get hsbVisible():Boolean {
                      var hsb:ScrollBarBase = getScroller().horizontalScrollBar;
                      return hsb && hsb.visible;
                  }

                  override public function updateDisplayList(w:Number, h:Number):void {
                      super.updateDisplayList(w, h);
                      var scroller:Scroller = getScroller();
                      if (!scroller){
                          return;
                      }

                      var vsb:ScrollBarBase = scroller.verticalScrollBar;
                      if (vsbVisible) {
                          vsb.setLayoutBoundsPosition(0, 0);
                      }

                  }

                  /**
                   *  @private
                   */
                  private function getScroller():Scroller {
                      var g:Skin = target as Skin;
                      return (g && ("hostComponent" in g)) ? Object(g).hostComponent as Scroller : null;
                  }

              }

               

              6. Create LeftHandScrollerGridLayout.as

               

              public class LeftHandScrollerGridLayout extends GridLayout {
                  public function LeftHandScrollerGridLayout() {
                      super();
                  }

                  public var offsetScroller:Number = 0;

                  //TODO: Only implemented for centerGridView as an experiment.
                  // Haven't catered for topGridView, leftGridView, topLeftGridView

                  override public function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

                      super.updateDisplayList(unscaledWidth, unscaledHeight);

                      const grid:Grid = target as Grid;
                      if (!grid || !centerGridView)
                          return;

                      const lockedRowCount:int = grid.lockedRowCount;
                      const lockedColumnCount:int = grid.lockedColumnCount;

                      const lockedRowsExist:Boolean = lockedRowCount > 0;
                      const lockedColumnsExist:Boolean = lockedColumnCount > 0;

                      const separatorX:Number = (lockedColumnsExist) ? leftGridView.getLayoutBoundsWidth() : 0;
                      const separatorY:Number = (lockedRowsExist) ? topGridView.getLayoutBoundsHeight() : 0;

                      var centerX:Number = separatorX;
                      var centerY:Number = separatorY;

                      centerGridView.setLayoutBoundsPosition(centerX + offsetScroller, centerY);
                  }
              }

               

              7. Use LeftHandScrollerDataGridSkin.mxml as the skinClass for your grid.

               

              Hope it helps.