[CLOSED] Grid with locking columns : screen repositioning issue

  1. #1

    [CLOSED] Grid with locking columns : screen repositioning issue

    I have user complaints the horizontal scroll bar auto moves while tabbing through the cells.

    When grid has no locking column, the scroll bar moves only when tabbing to the end of screen. This is what we expected.
    With locked columns, the scroll bar kept moving while cursor is still in the center of the screen.

    We had grid with many columns, the screen starts shifting while user only tabs on the first a few columns. It hides many columns that user needs to see.

    I can reproduce the issue from your example code:
    click on 1st column(Company name), press TAB multiple times, the screen starts shift when it reaches "Last Update" column.

    Unlock the col, the screen only shifts when i tabbed to the end of screen (company name column)

    Help please, Thanks!
    -susan

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.GridPanel1.Store.Primary.DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Locking Column Cell Editing - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <h1>Locking Column Cell Editing Example</h1>
    
        <p>This example shows how to edit a locking Panel using cell editing.</p>
        <p>It is not possible to lock or unlock <i>all</i> columns using the user interface. Each side, locked or unlocked must always contain at least one column.</p>
    
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            ColumnLines="true"
            Title="Locking Grid Column"
            Width="800"
            Height="350">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <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" DateFormat="M/d hh:mmtt" />
    
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column
                        runat="server"
                        Text="Company<br>Name"
                        DataIndex="company"
                        Width="200"
                        Locked="true"
                        Sortable="false">
                        <Editor>
                            <ext:TextField runat="server" />
                        </Editor>
                    </ext:Column>
    
                    <ext:Column runat="server" Text="Price" DataIndex="price" Width="97" Lockable="false">
                        <Renderer Format="UsMoney" />
                        <Editor>
                            <ext:NumberField runat="server" />
                        </Editor>
                    </ext:Column>
    
                    <ext:Column runat="server" Text="Change" DataIndex="change" Width="97">
                        <Renderer Fn="change" />
                        <Editor>
                            <ext:NumberField runat="server" />
                        </Editor>
                    </ext:Column>
    
                    <ext:Column runat="server" Text="% Change" DataIndex="pctChange" Width="97">
                        <Renderer Fn="pctChange" />
                        <Editor>
                            <ext:NumberField runat="server" />
                        </Editor>
                    </ext:Column>
    
                    <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" Width="97">
                        <Editor>
                            <ext:DateField runat="server" />
                        </Editor>
                    </ext:DateColumn>
                    <ext:Column
                        runat="server"
                        Text="Company Name"
                        DataIndex="company"
                        Width="200"
                        Sortable="false">
                        <Editor>
                            <ext:TextField runat="server" />
                        </Editor>
                    </ext:Column>
    
                    <ext:Column runat="server" Text="Price" DataIndex="price" Width="97" Lockable="false">
                        <Renderer Format="UsMoney" />
                        <Editor>
                            <ext:NumberField runat="server" />
                        </Editor>
                    </ext:Column>
    
                    <ext:Column runat="server" Text="Change" DataIndex="change" Width="97">
                        <Renderer Fn="change" />
                        <Editor>
                            <ext:NumberField runat="server" />
                        </Editor>
                    </ext:Column>
    
                    <ext:Column runat="server" Text="% Change" DataIndex="pctChange" Width="97">
                        <Renderer Fn="pctChange" />
                        <Editor>
                            <ext:NumberField runat="server" />
                        </Editor>
                    </ext:Column>
    
                    <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" Width="97">
                        <Editor>
                            <ext:DateField runat="server" />
                        </Editor>
                    </ext:DateColumn>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CellSelectionModel runat="server" />
            </SelectionModel>
            <Plugins>
                <ext:CellEditing runat="server" ClicksToEdit="1" />
            </Plugins>
        </ext:GridPanel>
    </body>
    </html>
    Last edited by fabricio.murta; Aug 06, 2019 at 6:38 PM. Reason: User request (Ext.NET version was too old)
  2. #2
    Hello Susan! Sorry for the delay, we are checking your report and will come back to you with an answer in a moment.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello again Susan!

    I'm afraid I was not able to reproduce the behavior you described. I recorded an animated gif doing what (I hope) you described. But with the column still locked, I still don't get the undesired scrolling.

    Maybe I'm missing an essential part to reproduce the issue? Or maybe you're with a specific browser/version that triggers this issue?

    Looking forward to your follow-up!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    ops! What use does have a recorded ani-gif that is not shared?
    Here it is: https://extnet.github.io/Ext.NET/for...ing-around.gif
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello again Susan,

    Have you had the chance to see the gifv we used to reproduce the case? What you think we missed in order to reproduce the issue? We're looking forward to being able to properly handle this issue!
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Sorry, somehow I did not get get notifications for your replies. I will try & let you know. What type of browser/version are you using?
    Thanks
    -sz
  7. #7
    I am using Ext4.2. Is it same as yours? Thanks -sz
  8. #8
    Quote Originally Posted by susanz
    I am using Ext4.2. Is it same as yours? Thanks -sz
    Oh, I get it now! So that's exactly the problem. We always use latest Ext.NET (currently public release, 4.8.2). And I really remember this issue, it is not new to us -- has been fixed along the road between 4.2 to now.

    If I recall well, it was not just a simple fix we could do with a quick override, so I strongly suggest you try to upgrade the version you are using for this and many more fixes.

    Or, maybe there's something introduced in newer versions that keep you from upgrading?
    Fabrício Murta
    Developer & Support Expert
  9. #9
    Thanks Fabricio! Looks like we need upgrade now.

    I haven't dared to try upgrade. We don't have enough resources to retest and my experience with our prev. upgrades wasn't that easy.
    Thanks! You can close this one now. More coming after upgrade
  10. #10
    Oh, hello Susan! We stand prepared for your inquiries! We are confident you won't get any major headaches with this upgrade. We've been trying to keep Ext.NET backwards compatible between minor version changes as far as we can, although Sencha tried to force us some breaking ones in the meanwhile.

    Closing this for now.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 6
    Last Post: Feb 25, 2017, 3:51 AM
  2. Replies: 0
    Last Post: Feb 03, 2015, 9:01 PM
  3. Replies: 3
    Last Post: Feb 19, 2013, 1:44 PM
  4. [CLOSED] Grouping Grid AND Locking Columns...
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 21, 2010, 6:53 PM
  5. [CLOSED] Grid columns issue
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 17, 2010, 7:36 PM

Posting Permissions