What's New?

[CLOSED] Two gridpanel scroll together

  1. #1
    Nov 17, 2016, 10:33 PM

    [CLOSED] Two gridpanel scroll together

    Hi,

    I have two gridpanels with the same width and number of columns and different stores.

    How can I scroll them together as if a single gridpanel ?

    And also hide scroll at the gridpanel which is above.
    Last edited by fabricio.murta; Jan 03, 2017 at 9:42 PM. Reason: no user feedback for 7+ days
  2. #2
    Nov 18, 2016, 6:32 PM
    Hello!

    I don't think that's a feature we have, to just sync two different grids, with different stores, scrollbars. We can't guarantee they will have the same height in the first place.

    This is something that works on the locked grids (which are two grids/views: the locked and unlocked) but they are the very same store.

    One thing you may try and do is make an outside container, and make it scrollable, and add the grids with full height inside it so you scroll the container instead. But the grids' title bars will also be scrolled away.

    You can also bind scrolling events to one and set overflow to hidden in the other (so scrollbars are not shown). Then with the scroll hidden, try and synchronize the scrollers on the two grids. But you will have to implement safety triggers for when both grids are not the same height.

    Maybe the best way to attain this view would be to merge the two stores into a single grid and keep the columns of one as locked and the columns of the other as not locked. Then you could work with synced vertical and horizontal scrolling, taking advantage of actually supported features of Ext.NET.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Nov 18, 2016, 9:53 PM
    Thanks for your response.

    You wrote

    "You can also bind scrolling events to one and set overflow to hidden in the other (so scrollbars are not shown). Then with the scroll hidden, try and synchronize the scrollers on the two grids. But you will have to implement safety triggers for when both grids are not the same height."

    That is exactly what i am trying to do.

    I am trying to horizontal scrollbar sync and my code make both grids are the same width.

    How can I do that ? It is mentioned earlier at this link

    http://forums.ext.net/showthread.php...-the-scrollbar

    but it is applied for ext 1.x but not for ext 2.x and 4.x ?

    Could you provide solutions for both versions ?
  4. #4
    Nov 21, 2016, 3:20 PM
    Hello @gumush75!

    This is a simple example on how to do this for Ext.NET 4:

    <%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>v4 - syncScroller</title>
    <script type="text/javascript">
        var bindScrollers = function () {
            App.gp1.getScrollable().getScrollElement().on('scroll', syncScrollers);
            App.gp2.getView().setOverflowXY(null,"hidden");
        }

        var syncScrollers = function (e, target) {
            App.gp2.setScrollX(App.gp1.getScrollX());
        }

        Ext.onReady(bindScrollers);
    </script>
</head>
<body>
    <form runat="server" id="fm1">
    <div>
        <ext:ResourceManager runat="server" />

        <ext:GridPanel runat="server" Title="Grid 1" ID="gp1" Height="200" Width="500">
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Column 1" Width="100" />
                    <ext:Column runat="server" Text="Column 2" Width="100" />
                    <ext:Column runat="server" Text="Column 3" Width="100" />
                    <ext:Column runat="server" Text="Column 4" Width="100" />
                    <ext:Column runat="server" Text="Column 5" Width="100" />
                    <ext:Column runat="server" Text="Column 6" Width="100" />
                    <ext:Column runat="server" Text="Column 7" Width="100" />
                    <ext:Column runat="server" Text="Column 8" Width="100" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>

        <ext:GridPanel runat="server" Title="Grid 2" ID="gp2" Height="200" Width="500">
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Column 1" Width="100" />
                    <ext:Column runat="server" Text="Column 2" Width="100" />
                    <ext:Column runat="server" Text="Column 3" Width="100" />
                    <ext:Column runat="server" Text="Column 4" Width="100" />
                    <ext:Column runat="server" Text="Column 5" Width="100" />
                    <ext:Column runat="server" Text="Column 6" Width="100" />
                    <ext:Column runat="server" Text="Column 7" Width="100" />
                    <ext:Column runat="server" Text="Column 8" Width="100" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </div>
    </form>
</body>
</html>
    And here's for v2:

    <%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>v2 - syncScroller</title>
    <script type="text/javascript">
        var bindScrollers = function () {
            App.gp1.getView().getTargetEl().on('scroll', syncScrollers);
            
            App.gp2.getView().getOverflowEl().setStyle("overflow-x", "hidden");
        }

        var syncScrollers = function (e, target) {
            gp1Handle = App.gp1.getView().getTargetEl()
            gp2Handle = App.gp2.getView().getTargetEl()

            gp2Handle.scrollTo('left', gp1Handle.getScrollLeft());
        }
    </script>
</head>
<body>
    <form runat="server" id="fm1">
    <div>
        <ext:ResourceManager runat="server" />

        <ext:GridPanel runat="server" Title="Grid 1" ID="gp1" Height="200" Width="500">
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Column 1" Width="100" />
                    <ext:Column runat="server" Text="Column 2" Width="100" />
                    <ext:Column runat="server" Text="Column 3" Width="100" />
                    <ext:Column runat="server" Text="Column 4" Width="100" />
                    <ext:Column runat="server" Text="Column 5" Width="100" />
                    <ext:Column runat="server" Text="Column 6" Width="100" />
                    <ext:Column runat="server" Text="Column 7" Width="100" />
                    <ext:Column runat="server" Text="Column 8" Width="100" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>

        <ext:GridPanel runat="server" Title="Grid 2" ID="gp2" Height="200" Width="500">
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Column 1" Width="100" />
                    <ext:Column runat="server" Text="Column 2" Width="100" />
                    <ext:Column runat="server" Text="Column 3" Width="100" />
                    <ext:Column runat="server" Text="Column 4" Width="100" />
                    <ext:Column runat="server" Text="Column 5" Width="100" />
                    <ext:Column runat="server" Text="Column 6" Width="100" />
                    <ext:Column runat="server" Text="Column 7" Width="100" />
                    <ext:Column runat="server" Text="Column 8" Width="100" />
                </Columns>
            </ColumnModel>
            <Listeners>
                <AfterRender Fn="bindScrollers" />
            </Listeners>
        </ext:GridPanel>
    </div>
    </form>
</body>
</html>
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  5. #5
    Dec 02, 2016, 2:22 PM
    Hello @gumush75!

    It's been some time since we last replied to your inquire and still not received any feedback from you. Did the solution provided above help? Are you still in need of help with this issue? Please let us know either way, we really appreciate your feedback!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. [Help] Scroll GridPanel
    By chienthang159 in forum 1.x Help
    Replies: 2
    Last Post: Mar 17, 2014, 6:01 AM
  2. [CLOSED] Want to show only vertical scroll bar and horizontal scroll bar should be removed
    By MarginPoint in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jun 06, 2013, 12:42 PM
  3. No Horizontal Scroll bar in GridPanel
    By fangmdu in forum 1.x Help
    Replies: 2
    Last Post: Jul 05, 2012, 9:53 PM
  4. GridPanel scroll can't use
    By qch2006qch in forum 1.x Help
    Replies: 0
    Last Post: Feb 10, 2012, 10:47 AM
  5. [CLOSED] gridpanel scroll bar
    By lonely7345 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 11, 2011, 4:48 PM

Tags for this Thread

Posting Permissions