[CLOSED] Infinite Scrolling Issue

  1. #1

    [CLOSED] Infinite Scrolling Issue

    Hi,

    I have been trying with Infinte Scrolling https://examples2.ext.net/#/GridPane...ite_Scrolling/

    The below your code works perfectly if paging is 100, but as soon as I set "PageSize=10", nothing comes up to display. On debuging Store_Store_ReadData, Start, Limit & Page is assigned unexpected number. Page should be 1,2,3 in sequnce but it shows 1,10,8 ,7 like wise.

    Also, first time it runs, if you refersh the page or runs second time, it stops working.

    Waiting for your reply.

    <%@ 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="200"
                DisableSelection="true" 
                Title="Stock Price">
                <Store>
                    <ext:Store 
                        runat="server" 
                        RemoteSort="true"
                        Buffered="true" 
                        PageSize="10"                     
                        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" 
                            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(worry) 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>
    Last edited by Daniil; Dec 24, 2013 at 8:33 AM. Reason: [CLOSED]
  2. #2
    Hello!

    Couldn't reproduce. What version of Ext.NET do you use?

    Also, try to set LeadingBufferZone and TrailingBufferZone:

    <ext:Store ID="Store1"
        runat="server"
        RemoteSort="true"
        Buffered="true"
        PageSize="10"               
        TrailingBufferZone="10"     
        LeadingBufferZone="10"
        OnReadData="Store_ReadData">
    I'd suggest to set Page size and the BufferZones at least to 20.

Similar Threads

  1. Replies: 6
    Last Post: Oct 07, 2013, 2:41 PM
  2. [CLOSED] MVC Infinite Scrolling with GridPanel
    By leonardm in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 01, 2013, 4:00 AM
  3. Example of infinite scrolling without using proxy
    By yash.kapoor in forum 2.x Help
    Replies: 2
    Last Post: Jan 02, 2013, 7:12 AM
  4. [CLOSED] TreePanel infinite scrolling
    By Leonid_Veriga in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 06, 2012, 5:13 PM
  5. [CLOSED] Infinite Scrolling
    By rnachman in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 09, 2012, 5:03 PM

Posting Permissions