[CLOSED] How to remove a vertical scroll bar from a TreeGrid control?

  1. #1

    [CLOSED] How to remove a vertical scroll bar from a TreeGrid control?

    Hi,

    There's a vertical scroll bar that appears by default and is hard to get rid of. My TreeGrid is defined in the markup as below and the nodes are built dynamically on the server. Please suggest a workaround.

    <ext:TreeGrid runat="server" ID="TreeGrid1" NoLeafIcon="true" EnableDD="true" StripeRows="true" TrackMouseOver="true"
                        SelectionMemory="Enabled" Split="true" AutoScroll="true" Border="true">
                        <Columns>
                            <ext:TreeGridColumn Header="Column 1" Width="300" DataIndex="Field1" />
                            <ext:TreeGridColumn Header="Column 2" Width="150" DataIndex="Field2" />
                        </Columns>
                        <BottomBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                   <ext:Button runat="server" Text="Click here" />
                                </Items>
                            </ext:Toolbar>
                        </BottomBar>
    </ext:TreeGrid>
    Last edited by fabricio.murta; Jul 07, 2015 at 9:47 PM. Reason: [CLOSED]
  2. #2
    Hello @vadym.f!

    If what you need is just getting rid of the scrollbar, all you need to do is add this to the page:

        <style>
            .x-treegrid-root-node {
                overflow-y: hidden;
            }
        </style>
    You can then add some width logic/script to remove the spare space allocated for the scrollbar if you wish.

    I hope this helps. If not, you can provide us the remaining part of the example you provided so we can run your test case and better advice about how to proceed.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thanks, Fabricio. The CSS rule hasn't helped remove the vertical scrollbar in my setup. I'm working on putting together a sample to reproduce the problem.
  4. #4
    I've come up with a workaround to remove the redundant vertical scroll bar as below:

    <script>
            var onDocumentReady = function () {
                // Remove the redundant vertical bar
                var style = TreeGrid1.el.child('.x-panel-body').dom.style;
                style.overflowY = "hidden";
            };
    </script>
    
            <ext:ResourceManager runat="server" DirectMethodNamespace="X">
                <Listeners>
                    <DocumentReady Handler="onDocumentReady();" />
                </Listeners>
            </ext:ResourceManager>
    You may close this thread down.
  5. #5
    Hello @vadym.f!

    Thank you very much for sharing the solution you found for your case! We really appreciate it.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] TreePanel's vertical scroll
    By RCN in forum 3.x Legacy Premium Help
    Replies: 10
    Last Post: Jan 14, 2015, 11:45 AM
  2. Replies: 8
    Last Post: Jun 06, 2013, 12:42 PM
  3. Problem with Vertical Scroll in GridPanel
    By vnmacedo in forum 2.x Help
    Replies: 3
    Last Post: Nov 19, 2012, 3:04 PM
  4. [CLOSED] Vertical scroll bar issue for treegrid
    By AnulekhaK in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 02, 2012, 8:30 AM
  5. Replies: 2
    Last Post: Jan 24, 2012, 1:12 PM

Tags for this Thread

Posting Permissions