[CLOSED] Buffered Store Grid with Locked Columns and Row Selection causes alignment issue. Scroll freezes the grid.

  1. #1

    [CLOSED] Buffered Store Grid with Locked Columns and Row Selection causes alignment issue. Scroll freezes the grid.

    Scrolling a buffered store grid with locked columns causing two issues.

    1. If you scroll from top or bottom using the scrollbar arrow icons, it scrolls a while and then scroll freez.
    2. Scrolling by dragging the scroll bar works, but time to time it creates highlighted selected row misalignment.

    Steps to reproduce.

    0. Use the chrome release 56.
    1. Use the following example from Ext.net provided example but change the GridPanel attribute from DisableSelection="true" to DisableSelection="false". Make sure you lock one more column.

    https://examples2.ext.net/#/GridPane...ite_Scrolling/

    Click image for larger version. 

Name:	chrome_locked_grid_issue.PNG 
Views:	308 
Size:	80.1 KB 
ID:	24839
    Here is the code to reproduce.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Store_ReadData(object sender, StoreReadDataEventArgs e)
        {
            Store store = (Store)sender;
            List<StockQuotation> data = new List<StockQuotation>();
            
            int start = e.Start,
                limit = e.Limit;
            Random randow = new Random();
            DateTime now = DateTime.Now;
    
    
            bool desc = false;
            if (e.Sort.Length > 0 && e.Sort[0].Direction == Ext.Net.SortDirection.DESC)
            {
                desc = true;
            }
            
            for (int i = start + 1; i <= start + limit; i++)
            {
                StockQuotation qoute = new StockQuotation()
                {
                    Company = "Company " + (desc ? 50000 - i + 1 : i),
                    Price = randow.Next(0, 200),
                    LastUpdate = now
                };
                
                data.Add(qoute);
            }
            store.Data = data;
            e.Total = 50000;
        }
    
    
        class StockQuotation
        {
            public string Company  { get; set; }
            public int Price { get; set; }
            public DateTime LastUpdate { get; set; }
        }
    </script>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head runat="server">
        <title>Infinite Scroll Grid with lockable columns - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>Infinite Scrolling</h1>
            <p>Ext.Net 2's brand new grid supports infinite scrolling, which enables you to load any number of records into a grid without paging.</p>
            <p>The new grid uses a virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.</p>
            <p>The number of rendered rows is only just larger than the visible row count. As the edge of the rendered data scrolls towards being in
                view, the table is refreshed, and repositioned to maintain visual scroll position.</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 
                runat="server" 
                Width="500" 
                Height="500"
                DisableSelection="false" 
                Title="Stock Price">
                <Store>
                    <ext:Store 
                        runat="server" 
                        RemoteSort="true"
                        Buffered="true" 
                        PageSize="100"                     
                        OnReadData="Store_ReadData">
                        <Proxy>
                            <ext:PageProxy>
                                <Reader>
                                    <ext:JsonReader Root="data" />
                                </Reader>
                            </ext:PageProxy>
                        </Proxy>
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="Company" />
                                    <ext:ModelField Name="Price" />
                                    <ext:ModelField Name="LastUpdate" />
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Sorters>
                            <ext:DataSorter Property="Company" Direction="ASC" />
                        </Sorters>
                    </ext:Store>
                </Store>           
                <ColumnModel runat="server">
                    <Columns>
                        <ext:RowNumbererColumn 
                            runat="server" 
                            Lockable="false"
                            Locked="true"
                            Width="50" />
                        <ext:Column 
                            runat="server" 
                            Text="Company" 
                            DataIndex="Company" 
     Locked="true"
                            Width="170" />
                        <ext:Column 
                            runat="server" 
                            Text="Price, $" 
                            DataIndex="Price" 
                            Width="170"
                            Sortable="false"
                            Align="Center" />
                        <ext:Column 
                            runat="server" 
                            Text="Last Update" 
                            DataIndex="LastUpdate" 
                            Sortable="false"
                            Width="170">
                            <Renderer Format="Date" FormatArgs="'n/j/Y g:i:s A'" />
                        </ext:Column>
                    </Columns>
                </ColumnModel>           
                <View>
                    <ext:GridView runat="server" TrackOver="false" />
                </View>       
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" PruneRemoved="false" Mode="Multi" />
                </SelectionModel>                 
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	chrome_locked_grid_issue.PNG 
Views:	200 
Size:	71.5 KB 
ID:	24838  
    Last edited by fabricio.murta; Mar 10, 2017 at 6:29 PM. Reason: no user feedback for 7+ days
  2. #2

    Any Help or Guidance on this Scroll Freeze issue please?

    I would appreciate if somebody can provide some help or insight on this issue. Thanks
  3. #3
    Hello @shahidmughal!

    Sorry for the delay, we are investigating the issue now. There's been several issues with scrolling and locking grid and this probably has been fixed in the 3.x and 4.x versions. Probably a good idea would be to disable buffered scrolling and maybe use a paging grid if the contents are too many to display at once.
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Hello again!

    I could see this bug happens with the ordinary example on examples explorer for version 2 -- no changes required -- but on versions 3 (example) and 4 (example) it does not happen at all.

    Unfortunately that's not a trivial issue that has already been fixed when version 3 was released, so the fix will pretty much mean upgrading to Ext.NET 3 or newer.

    I'm afraid what we can recommend you is not using an infinite scrolling (buffered) grid panel with locked columns in version 2.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Thanks fabricio,

    How smooth is the migration to v3 or v4? Can our v2 code continue to work without major modification?

    Thanks
    Shahid
  6. #6
    Hello again Shahid!

    Well, there are breaking changes and it will require you a learning curve during the upgrade process. Some things do not work the same they used to, specially when we are talking about charts. These advanced dramatically over each version iteration you can barely recognize their code if you compare with 2.x charts. In my personal opinion, charts evolved for better, much better in comparison to 2.x!

    Some other aspects like binding data also changed. I remember they changed even in-between version 2 updates, but then since version 3 they established. The new themes gives a modern feel to the application but will require reviewing basically any panels or containers you specified fixed width and height. I don't think that's a problem, given the benefit, though.

    Overall, it totally depends on how you have been using the components, how much you customized them (with code or CSS overriding) and what features of the components you been using.

    There's also the chance something that used to work on 2.x would not work on newer versions at all. In this trait, I'd say it is much more feasible for us to provide you a solution for the new version (which worst case can be backtracked to v2) than the other way around -- which is exactly the example here.

    You can also see what other people migrating have been thru to assess the feasibility for you by searching the forums for the word "upgrade" or "upgrading". Looking at the open issues (and searching for bugs on components you massively use) may also help you in the assessment.

    Last but not least, maybe the best way for you to know how your application would behave on an upgrade would be to fork it off (copy the project somewhere else, maybe) and then give it a try, upgrading the NuGet package to 4.2.0. We'll be glad to help you figure out the issues that can come up with, and as long as strictly run on your development environment, you don't need a license upgrade to run and test it.

    Additionally to upgrading it to version 4 you will be able to also use the Ext.NET Mobile which is completely focused on mobile applications. That would, for example, allow you to make a decent front end for the same application to be accessed from mobile phones. The use of Ext.NET Mobile is included in the license and will require no additional purchase.

    The list below is a filter of issues that affects version 4.x and are still "open". But don't get scared by the amount of them, for most of them have links to their corresponding forum thread here and a workaround for the situation faced. Sometimes they can be fixed but left open so we can backtrack them after our underlying framework, ExtJS fixes them on their side.
    - Open bugs for Ext.NET 4

    Well, I believe this will be going to be a long read but I hope it is worth the time and helpful enough!
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Hello Shahid!

    Been some time since we posted a follow-up here and still no feedback from you. Do you still need help with this issue? If you still don't provide any feedback in 7+ days from now we may be marking this as closed -- but that won't prevent you from posting follow-ups when you have time.

    We're looking forward to your feedback and willing to help!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 3
    Last Post: Mar 11, 2015, 7:28 PM
  2. Replies: 1
    Last Post: Jan 06, 2015, 11:18 AM
  3. Replies: 1
    Last Post: Dec 22, 2014, 1:20 PM
  4. Grid Panel Alignment Issue
    By pooja in forum 1.x Help
    Replies: 0
    Last Post: Dec 12, 2013, 11:18 AM
  5. [CLOSED] Shared store with buffered grid
    By Justin_Wignall in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 05, 2012, 2:00 PM

Posting Permissions