Grid horizontal scrollbar jumps back to beginning when sort or change the width of the column.

[mkomiyama]

We are implementing grid panel with horizontal scroll bar.
When the either action is executed, scrollbar jumps back to the beginning of the unlock column on the left.
1 Change the column width of the column in the right side of the panel. Change the width again.(It won't jump at the first time the column with has been changed. )
2 Sort the column in the right side of the panel.

This occurs in Chrome(ver.81.0.4044.138) and not occur in IE or Edge.

Is there any way to avoid this jump?

We are using ext.net 4.8.3.

<ext:GridPanel ID="ResultGridPanel"
    runat="server" ColumnLines="true" TitleCollapse="true"
    Region="Center" EnableColumnMove="false" EnableColumnHide="false">
    <Store>
        <ext:Store ID="SearchResultStore" runat="server" OnReadData="ParameterStore_Refresh" PageSize="20">
            <Model>
                <ext:Model runat="server">
                    <Fields>
                         <ext:ModelField Name="LockItem" Type="String" />
                         <ext:ModelField Name="Item1" Type="String" />
                         <ext:ModelField Name="Item2" Type="String" />
                         <ext:ModelField Name="Item3" Type="String" />
                         <ext:ModelField Name="Item4" Type="String" />
                         <ext:ModelField Name="Item5" Type="String" />
                         <ext:ModelField Name="ItemA1" Type="Date" />
                         <ext:ModelField Name="ItemA2" Type="Date" />
                         <ext:ModelField Name="ItemA3" Type="Date" />
                         <ext:ModelField Name="ItemB1" Type="String" />
                         <ext:ModelField Name="ItemB2" Type="String" />
                         <ext:ModelField Name="ItemB3" Type="String" />
                         <ext:ModelField Name="Item6" Type="Date" />
                         <ext:ModelField Name="ItemC1" Type="Date" />
                         <ext:ModelField Name="ItemC2" Type="Date" />
                         <ext:ModelField Name="ItemC3" Type="Date" />
                         <ext:ModelField Name="ItemD1" Type="String" />
                         <ext:ModelField Name="ItemD2" Type="String" />
                         <ext:ModelField Name="ItemD3" Type="String" />
                         <ext:ModelField Name="Item7" Type="String" />
                         <ext:ModelField Name="Item8" Type="String" />
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>
    </Store>
    <ColumnModel runat="server">
        <Defaults>
            <ext:Parameter Name="Hideable" Value="false" />
            <ext:Parameter Name="CellWrap" Value="true" />
            <ext:Parameter Name="Sortable" Value="true" />
        </Defaults>
        <Columns>
            <ext:ComponentColumn runat="server" ID="LockItemColumn" Text="LockItem" DataIndex="LockItem" Width="250" Locked="true"
                <Component>
                    <ext:HyperlinkButton runat="server" MarginSpec="0 0 0 10">
                    <Listeners>
                        <Click Fn="LockedItemClicked" />
                    </Listeners>
                    </ext:HyperlinkButton>
                </Component>
                <Listeners>
                    <Bind Handler="cmp.setText(record.get('LockItem'))" />
                </Listeners>
            </ext:ComponentColumn>
            
            <ext:Column runat="server" Text="Title1">
                <Defaults>
                    <ext:Parameter Name="Hideable" Value="false" />
                    <ext:Parameter Name="CellWrap" Value="true" />
                    <ext:Parameter Name="Sortable" Value="true" />
                    <ext:Parameter Name="Align" Value="Center" />
                </Defaults>
                <Columns>
                    <ext:ComponentColumn runat="server" ID="Item1Column" Text="Item1" DataIndex="Item1" Width="100">
                    <Component>
                        <ext:HyperlinkButton runat="server">
                            <Listeners>
                                <Click Fn="ItemClicked" />
                            </Listeners>
                        </ext:HyperlinkButton>
                    </Component>
                    <Listeners>
                        <Bind Handler="cmp.setText(record.get('Item1'))" />
                    </Listeners>
                    </ext:ComponentColumn>
                    <ext:Column runat="server" ID="Item2Column" Text="Item2" DataIndex="Item2" Width="120" />
                    <ext:Column runat="server" ID="Item3Column" Text="Item3" DataIndex="Item3" Width="120" />
                    <ext:Column runat="server" ID="Item4Column" Text="Item4" DataIndex="Item4" Width="250" />
                    <ext:Column runat="server" ID="Item5Column" Text="Item5" DataIndex="Item5" Width="150" />
                </Columns>
            </ext:Column>

            <ext:Column runat="server" Text="Title2" >
                <Defaults>
                    <ext:Parameter Name="Hideable" Value="false" />
                    <ext:Parameter Name="CellWrap" Value="true" />
                    <ext:Parameter Name="Sortable" Value="true" />
                    <ext:Parameter Name="Align" Value="Center" />
                </Defaults>
                <Columns>
                    <ext:Column runat="server" Text="GroupA">
                        <Defaults>
                            <ext:Parameter Name="Hideable" Value="false" />
                            <ext:Parameter Name="CellWrap" Value="true" />
                            <ext:Parameter Name="Sortable" Value="true" />
                            <ext:Parameter Name="Align" Value="Center" />
                        </Defaults>
                        <Columns>
                            <ext:DateColumn runat="server" ID="ItemA1Column" DataIndex="ItemA1" Format="dd-MMM-yy" Width="100" />
                            <ext:DateColumn runat="server" ID="ItemA2Column" DataIndex="ItemA2" Format="dd-MMM-yy" Width="100" />
                            <ext:DateColumn runat="server" ID="ItemA3Column" DataIndex="ItemA3" Format="dd-MMM-yy" Width="100" />
                        </Columns>
                    </ext:Column>

                    <ext:Column runat="server" Text="GroupB">
                        <Defaults>
                            <ext:Parameter Name="Hideable" Value="false" />
                            <ext:Parameter Name="CellWrap" Value="true" />
                            <ext:Parameter Name="Sortable" Value="true" />
                            <ext:Parameter Name="Align" Value="Center" />
                        </Defaults>
                        <Columns>
                            <ext:Column runat="server" ID="ItemB1Column" DataIndex="ItemB1" Width="120" />
                            <ext:Column runat="server" ID="ItemB2Column" DataIndex="ItemB2" Width="120" />
                            <ext:Column runat="server" ID="ItemB3Column" DataIndex="ItemB3" Width="120" />
                        </Columns>
                    </ext:Column>

                    <ext:DateColumn runat="server" ID="Item6Column" Text="Item6" DataIndex="Item6" Format="dd-MMM-yy" Width="120" />

                    <ext:Column runat="server" Text="GroupC">
                        <Defaults>
                            <ext:Parameter Name="Hideable" Value="false" />
                            <ext:Parameter Name="CellWrap" Value="true" />
                            <ext:Parameter Name="Sortable" Value="true" />
                            <ext:Parameter Name="Align" Value="Center" />
                        </Defaults>
                        <Columns>
                            <ext:DateColumn runat="server" ID="ItemC1Column" DataIndex="ItemC1" Format="dd-MMM-yy" Width="100" />
                            <ext:DateColumn runat="server" ID="ItemC2Column" DataIndex="ItemC2" Format="dd-MMM-yy" Width="100" />
                            <ext:DateColumn runat="server" ID="ItemC3Column" DataIndex="ItemC3" Format="dd-MMM-yy" Width="100" />
                        </Columns>
                    </ext:Column>

                    <ext:Column runat="server" Text="GroupD">
                    <Defaults>
                        <ext:Parameter Name="Hideable" Value="false" />
                        <ext:Parameter Name="CellWrap" Value="true" />
                        <ext:Parameter Name="Sortable" Value="true" />
                        <ext:Parameter Name="Align" Value="Center" />
                    </Defaults>
                    <Columns>
                        <ext:Column runat="server" ID="ItemD1Column" DataIndex="ItemD1" Width="120" />
                        <ext:Column runat="server" ID="ItemD2Column" DataIndex="ItemD2" Width="120" />
                        <ext:Column runat="server" ID="ItemD3Column" DataIndex="ItemD3" Width="120" />
                    </Columns>
                    </ext:Column>

                    <ext:Column runat="server" ID="Item7Column" Text="Item7" DataIndex="Item7" Width="120" />
                    <ext:Column runat="server" ID="Item8Column" Text="Item8" DataIndex="Item8" Width="120" />
                </Columns>
            </ext:Column>
        </ext:Column>
    </ColumnModel>
    <BottomBar>
        <ext:PagingToolbar runat="server" HideRefresh="true">
            <Items>
                <ext:DisplayField runat="server" ID="InfoLabel" Width="105" MarginSpec="0 20 0 20" />
                <ext:ToolbarFill runat="server" />
            </Items>
        </ext:PagingToolbar>
    </BottomBar>
    <SelectionModel>
        <ext:CheckboxSelectionModel runat="server" Mode="Multi" />
    </SelectionModel>
</ext:GridPanel>

[fabricio.murta]

Hello @mkomiyama!

Please provide a runnable and simplified code sample reproducing the issue so we can take a look.

As per your description I couldn't find an issue already logged for this, so I am left wondering what could be happening and what exactly would be your scenario.

[mkomiyama]

Hello @fabricio.murta


The problem seem to reproduce by changing the following example slightly in chrome.
https://examples4.ext.net/#/GridPane...l_Data_Paging/

【Update from the sample】
・Delete GridPanel Width
・Add Column Width

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridPanelCheckBoxSelectionSample.aspx.cs" Inherits="CIDBWebMock.Test.GridPanelCheckBoxSelectionSample" %>

<%@ Import Namespace="System.Xml" %>
<script runat="server">
    private object[] TestData
    {
        get
        {
            DateTime now = DateTime.Now;

            return new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                new object[] { "Government Motors Corporation", 30.27, 1.09, 3.74, now },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
            };
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Store1.DataSource = this.TestData;
        }
    }

    protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)
    {
        this.Store1.DataSource = this.TestData;
        this.Store1.DataBind();
    }

    protected void Store1_Submit(object sender, StoreSubmitDataEventArgs e)
    {
        XmlNode xml = e.Xml;

        this.Response.Clear();

        string strXml = xml.OuterXml;

        this.Response.AddHeader("Content-Disposition", "attachment; filename=submittedData.xml");
        this.Response.AddHeader("Content-Length", strXml.Length.ToString());
        this.Response.ContentType = "application/xml";
        this.Response.Write(strXml);

        this.Response.End();
    }

    protected void SaveHandler(object sender, BeforeStoreChangedEventArgs e)
    {
        XmlNode xml = e.DataHandler.XmlData;
        StringBuilder sb = new StringBuilder();

        sb.Append("<p>" + e.Action + ":</p>");

        XmlNodeList records = xml.SelectNodes("records/record");

        foreach (XmlNode record in records)
        {
            sb.Append("<p>").Append(Server.HtmlEncode(record.InnerXml)).Append("</p>");
        }

        sb.Append("<br/>");

        /*XmlNode updated = xml.SelectSingleNode("records/Updated");

        if (updated != null)
        {
            sb.Append("<p>Updated:</p>");

            XmlNodeList uRecords = updated.SelectNodes("record");

            foreach (XmlNode record in uRecords)
            {
                sb.Append("<p>").Append(Server.HtmlEncode(record.InnerXml)).Append("</p>");
            }

            sb.Append("<br/>");
        }

        XmlNode inserted = xml.SelectSingleNode("records/Created");

        if (inserted != null)
        {
            sb.Append("<p>Created:</p>");

            XmlNodeList iRecords = inserted.SelectNodes("record");

            foreach (XmlNode record in iRecords)
            {
                sb.Append("<p>").Append(Server.HtmlEncode(record.InnerXml)).Append("</p>");
            }

            sb.Append("<br/>");
        }

        XmlNode deleted = xml.SelectSingleNode("records/Deleted");

        if (deleted != null)
        {
            sb.Append("<p>Deleted:</p>");

            XmlNodeList dRecords = deleted.SelectNodes("record");

            foreach (XmlNode record in dRecords)
            {
                sb.Append("<p>").Append(Server.HtmlEncode(record.InnerXml)).Append("</p>");
            }

            sb.Append("<br/>");
        }*/

        this.Label1.Html = sb.ToString();
    }
</script>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Local Data Paging - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />

    <script>
        var count = 0; // a counter for new records

        var exportData = function (selectedOnly) {
            App.GridPanel1.submitData({selectedOnly : selectedOnly}, {isUpload:true});
        };

        var selectRecord = function (id) {
            var grid = App.GridPanel1,
                record = grid.store.getById(id);

            if (!record) {
                Ext.Msg.alert("Error", "Record '" + id + "' not found.");
            } else {
                grid.store.loadPage(grid.store.findPage(record), {
                    callback: function () {
                        grid.getSelectionModel().select(record);
                    }
                });
            }
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <h1>The sample demonstrates local paging in the GridPanel</h1>

        <p>1. Local Paging</p>
        <p>2. You can submit data from all grid's pages in one request</p>
        <p>3. If you edit data on various grid's pages then you can save in one request and changes will not be lost when you navigate beetwen pages</p>
        <p>4. Get selected data from all pages</p>
        <p>5. Navigate on page by record</p>

        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Title="Array Grid">
            <Store>
                <ext:Store
                    ID="Store1"
                    runat="server"
                    RemoteSort="false"
                    OnReadData="MyData_Refresh"
                    OnSubmitData="Store1_Submit"
                    OnBeforeStoreChanged="SaveHandler"
                    PageSize="10">
                    <Model>
                        <ext:Model runat="server" IDProperty="company">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Company" DataIndex="company" Width="600" Flex="1">
                        <Editor>
                            <ext:TextField runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column runat="server" Text="Price" Width="400" DataIndex="price">
                        <Editor>
                            <ext:TextField runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" Width="400" DataIndex="change" />
                    <ext:Column runat="server" Text="Change" Width="400" DataIndex="pctChange" />
                    <ext:DateColumn
                        runat="server"
                        Text="Last Updated"
                        Width="400"
                        DataIndex="lastChange"
                        Format="HH:mm:ss" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel runat="server" Mode="Multi" />
            </SelectionModel>
            <Plugins>
                <ext:CellEditing runat="server" />
            </Plugins>
            <BottomBar>
                <ext:PagingToolbar runat="server" />
            </BottomBar>
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Add record" Icon="Add">
                            <Listeners>
                                <Click Handler="var grid = #{GridPanel1},
                                                    store = grid.store;
                                                store.insert(0, { company : 'New' + count++ });
                                                Ext.Function.defer(function() {
                                                    grid.editingPlugin.startEditByPosition({row: 0, column: 0})
                                                }, 100); " />
                            </Listeners>
                        </ext:Button>
                        <ext:Button runat="server" Text="Delete selected" Icon="Delete">
                            <Listeners>
                                <Click Handler="var grid = #{GridPanel1},
                                                    store = grid.store,
                                                    records = grid.selModel.getSelection();
                                                store.remove(records);
                                                store.load(true);" />
                            </Listeners>
                        </ext:Button>
                        <ext:ToolbarFill runat="server" />
                        <ext:Button runat="server" Text="Find 'Government Motors'" Icon="Find">
                            <Listeners>
                                <Click Handler="selectRecord('Government Motors Corporation');" />
                            </Listeners>
                        </ext:Button>
                        <ext:Button runat="server" Text="To XML" Icon="PageCode">
                            <Listeners>
                                <Click Handler="exportData();" />
                            </Listeners>
                        </ext:Button>
                        <ext:Button runat="server" Text="Selection To XML" Icon="PageCode">
                            <Listeners>
                                <Click Handler="exportData(true);" />
                            </Listeners>
                        </ext:Button>
                        <ext:Button runat="server"  Text="Save" Icon="Disk">
                            <Listeners>
                                <Click Handler="#{GridPanel1}.store.sync();" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:GridPanel>

        <ext:Label ID="Label1" runat="server" />
    </form>
</body>
</html>

【Steps】
1. Expand "Company" column so that horizontal scroll bar would appear
2. Scroll to the right side and change the width of "Change" twice or sort.

[fabricio.murta]

Hello @mkomiyama!

There should be something else involved outside of Ext.NET and "stock chrome". If you let your Chrome update to 83.x does the problem persist?

I tried several times alternating between just changing the "change" column width twice, changing it and sorting, or only sorting (after expanding the 'company' column to make the horizontal scroller show up), and no matter what, I couldn't reproduce the scroll reset issue.

Could a browser extension be affecting this? Can you try the same example in an incognito tab or a fresh Chrome profile? I assume you don't reproduce this in other major browsers (edge, firefox), right?

[mkomiyama]

Hello @fabricio.murta

Unfortunately the problem occurs even I updated chrome to 83.0 or the way you had suggested us. Not only me but also all our project members.
I wonder what's the difference with your environment.And this does not happen in IE or EDGE.


It seems that the grid is reloading after sorting or changing the column width.
Are there a way to control screen position so that scroll bar maintain the previous position which can be used as a workaround?

[fabricio.murta]

Maybe, worth trying to create a new project, add Ext.NET, and run your sample? Here it is still the same, it never scrolls back no matter what.

I tried running it in a 4.x and 5.x project, and in both it works fine on Chrome 83. There must be something else at play there.

[mkomiyama]

Hello @fabricio.murta

I found out that we are using EXT.net 4.1, not 4.8.3.

This may be the reason the problem only occurs in our end.

Since we would not like to update to 4.8.3 as much as possible, we would like to try the steps described in the following similar issue, but cannot find where to set PreserveScrollOnReload="true" and/or [b]PreserveScrollOnRefresh="true".


[CLOSED] [#1390] [4.1.0] Maintai Horizontale Scroll position in GridPanel After refresh

We would be appreciated if you could let us know a little more in details.

[fabricio.murta]

Hello @mkomiyama!

This feature is simply broken in Ext.NET 4.1.0. The only way you can have it in 4.1.0 is by implementing client-side code to fix it.

If you can't upgrade, I don't see how you'd be able to overcome this issue without the method above.

Well, and responding your following note, this setting pertains a grid's View. One example with a grid setting view configuration is at:
- GridPanel > ColumnModel > WidgetColumn

But as you probably noticed by the issue pointed, this was fixed in 4.2.0. And it was a fix in the underlying framework, Ext JS; it was not a fix Ext.NET team written.

Hope this helps!

[mkomiyama]

Dear ï¼*fabricio.murta

We decided to upgrade EXT.net.

After the upgrade, the issue does not occur anymore.

Thank you for your support.

Please mark as [CLOSED].