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

Threaded View

Previous Post Previous Post   Next Post Next Post
  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.

    http://examples2.ext.net/#/GridPanel...ite_Scrolling/

    Click image for larger version. 

Name:	chrome_locked_grid_issue.PNG 
Views:	9 
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 chrome_locked_grid_issue.PNG  
    Last edited by fabricio.murta; Mar 10, 2017 at 6:29 PM. Reason: no user feedback for 7+ days

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