8 Replies Latest reply on Aug 13, 2007 2:06 PM by jfillman

    Datagrid Scrollbars - How to disable

    csawall
      I have a Panel in which I basically just have the following, an HBox with a Text entry and then another HBox with a DataGrid. I have the DataGrid set to 100% height and width. Depending on how much data is returned to the DataGrid I will get dual scroll bars. One in the DataGrid itself and one on the Panel. This doesn't look very good and is a bit difficult to navigate. Occasionally I will only get one scroll bar and it's on the Panel. This only happens if a small amount of data is returned to the DataGrid.

      Is there a way to disable the scrollbar on the DataGrid? I've searched this forum over and did a pretty exhaustive search on Google, but failed to find anything.... or I missed it.

      Any help would be appreciated.

      Thanks,
      Chris
        • 1. Re: Datagrid Scrollbars - How to disable
          Cheree Singal
          Hi,
          Did u try verticalSrollPolicy="off" & horizontalScrollPolicy="off"?

          Cheree
          • 2. Re: Datagrid Scrollbars - How to disable
            csawall Level 1
            Cheree - Thanks for the reply! I guess I didn't realize that's what that option meant. After setting it, it definitely removes the Scrollbar. Now there's a new problem.

            If I set that option to disable the scrollbar in the Panel, then I only scroll until I hit the bottom of the panel. If I disable it in the DataGrid, it only allows me to scroll so far down the panel and then stops instead of scrolling all the way to the end of the datagrid.

            Any ideas?

            Thanks,
            chris
            • 3. Re: Datagrid Scrollbars - How to disable
              jfillman Level 1
              Set a fixed height for your DataGrid (like 80 or 100), and set verticalScrollPolicy="auto" and horizontalScrollPolicy="auto". If you set the constraints on your panel appropriately, your panel shouldn't need to scroll, at least not because of the DataGrid size.
              • 4. Datagrid Scrollbars - How to disable
                csawall Level 1
                Thanks for the info. If I static define a height, it works as you state. But how do I account for window resizing? I prefer a percentage so that if the window is resized, the datagrid resizes appropriately. I tried changing the percentage to something like 98%, or less, but that didn't work either. I edited my panel down to be generic, but show what I'm doing.

                See the "dg1" datagrid. Does this help explain?

                <mx:Panel id="p1" x="10" y="375" height="55%" bottom="5" width="95%" title="t1" paddingLeft="3" paddingRight="3" roundedBottomCorners="true">
                <mx:HBox>
                <mx:HBox width="50%">
                <mx:Label text="Hostname:"/>
                <mx:Text id="txt1" text=""/>
                </mx:HBox>
                <mx:HBox width="50%">
                <mx:LinkButton id="lb1" label="Some Label" enabled="{currentState!='' &amp;&amp; currentState!=null}" visible="{currentState!='' &amp;&amp; currentState!=null}" color="#ff0000" click="confirm_lb1()"/>
                </mx:HBox>
                </mx:HBox>
                <mx:DataGrid id="dg1" dataProvider="{_xmlDP1}" width="100%" height="100%" click="parse1(event)" change="changeit()">
                <mx:columns>
                <mx:DataGridColumn headerText="head1" dataField="df1" width="75" wordWrap="true"/>
                <mx:DataGridColumn headerText="head2" dataField="df2">
                <mx:itemRenderer>
                <mx:Component>
                <mx:Text htmlText="{data.df2}"/>
                </mx:Component>
                </mx:itemRenderer>
                </mx:DataGridColumn>
                <mx:DataGridColumn headerText="head3" dataField="df3" width="40"/>
                <mx:DataGridColumn headerText="head4" dataField="df4" width="50">
                <mx:itemRenderer>
                <mx:Component>
                <mx:LinkButton label="{data.df4}" click="navigateToURL(new URLRequest(data.df4), '_blank')"/>
                </mx:Component>
                </mx:itemRenderer>
                </mx:DataGridColumn>
                </mx:columns>
                </mx:DataGrid>
                </mx:Panel>

                Any other ideas would be great.

                Thanks,
                Chris

                • 5. Datagrid Scrollbars - How to disable
                  csawall Level 1
                  I would like to add a question to the above to clarify the last response I was given.

                  How should I "constrain my panel appropriately"?

                  Thanks.
                  chris
                  • 6. Re: Datagrid Scrollbars - How to disable
                    jfillman Level 1
                    I wasn't suggesting that you did it wrong, I don't have your app in front of me. Primarily, I would set percentage height and width or top, bottom, left, and right values, so that everything sizes proportionally, versus using fixed height and width, which can cause issues when the application is resized.
                    • 7. Re: Datagrid Scrollbars - How to disable
                      csawall Level 1
                      jfillman - thanks for getting back. based on what you're saying, can you look a few posts back. i pasted some of my code, specifically the panel and datagrid in question. i am setting certain x, y, width and height parameters. am i missing something?

                      i appreciate your help thus far.

                      chris
                      • 8. Re: Datagrid Scrollbars - How to disable
                        jfillman Level 1
                        Your settings are probably fine. You might consider changing it to something like this:

                        <mx:Panel id="p1" top="45%" height="55%" bottom="5" left="10" right="10" title="t1" paddingLeft="3" paddingRight="3" roundedBottomCorners="true">

                        Instead of having a fixed x and y position, this is a little better, but again, it depends on what you have above this panel, and if you had anything in the 5% to the right of the panel. If you have another panel above this one, setting a specific y value for the bottom panel, could cause the top panel and this panel to overlap when resized. If you set the top panel similarly to what I proposed, they won't overlap, although they both become relationally smaller as the application is resized smaller.

                        These are subtle differences, that are a little hard to explain without adding some additional containers, but they can be important when the users is resizing the application/browser.