[CLOSED] RemoteSort for buffered store

Page 2 of 5 FirstFirst 1234 ... LastLast
  1. #11
    The buffered scrolling example

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Linq" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.TestData(5000);
                this.Store1.DataBind();
            }
        }
    
        private object[] TestData(int count)
        {
            var firstNames = new string[] { "Ed", "Tommy", "Aaron", "Abe", "Jamie", "Adam", "Dave", "David", "Jay", "Nicolas", "Nige" };
            var lastNames = new string[] { "Spencer", "Maintz", "Conran", "Elias", "Avins", "Mishcon", "Kaneda", "Davis", "Robinson", "Ferrero", "White" };
            var ratings = new int[] { 1, 2, 3, 4, 5 };
            var salaries = new int[] { 100, 400, 900, 1500, 1000000 };
    
            var data = new object[count];
            var rnd = new Random();
    
            for (int i = 0; i < count; i++)
            {
                var ratingId = rnd.Next(ratings.Length);
                var salaryId = rnd.Next(salaries.Length);
                var firstNameId = rnd.Next(firstNames.Length);
                var lastNameId = rnd.Next(lastNames.Length);
    
                var rating = ratings[ratingId];
                var salary = salaries[salaryId];
                var name = String.Format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
    
                data[i] = new object[] { name, rating, salary };
            }
    
            return data;
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Buffered Scrolling - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <h1>Buffered 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>This example illustrates loading of all the records up front and buffering the rendering.</p>
            
            <ext:GridPanel ID="GridPanel1" 
                runat="server" 
                Title="Bufffered Grid of 5,000 random records" 
                DisableSelection="true"
                InvalidateScrollerOnRefresh="false"
                Width="700" 
                Height="500">
                <Store>
                    <ext:Store 
                        ID="Store1" 
                        runat="server" 
                        PageSize="50" 
                        Buffered="true" 
                        PurgePageCount="0" 
                        AutoLoad="false">                    
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="name" />
                                    <ext:ModelField Name="rating" Type="Int" />
                                    <ext:ModelField Name="salary" Type="Float" />
                                </Fields>
                            </ext:Model>
                        </Model>            
                    </ext:Store>
                </Store>
                <%--<VerticalScroller>
                    <ext:GridPagingScroller ID="GridPagingScroller1" runat="server" ActivePrefetch="false" />
                </VerticalScroller>--%>
                <View>
                    <ext:GridView ID="GridView1" runat="server" TrackOver="false" />
                </View>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="40" Sortable="false" />
                        <ext:Column ID="Column1" runat="server" Text="Name" Flex="1" DataIndex="name" />
                        <ext:Column ID="Column2" runat="server" Text="Rating" Width="125" DataIndex="rating" />
                        <ext:Column ID="Column3" runat="server" Text="Salary" Width="125" DataIndex="salary" Align="Right">
                            <Renderer Format="UsMoney" />
                        </ext:Column>                    
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <AfterRender Handler="this.store.cacheRecords(this.store.proxy.getRecords());this.store.guaranteeRange(0, 49);" Delay="100" />
                </Listeners>                              
            </ext:GridPanel>
        </form>
    </body>
    </html>
    I got the Object doesn't support this property or method for the AfterRender Handler (store.cacheRecords method).
  2. #12
    Well, it has been updated in SVN.

    The last Ext.NET.Examples sources you can get here:
    https://github.com/extnet/Ext.NET.Examples

    Example
    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Linq" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.TestData(5000);
                this.Store1.DataBind();
            }
        }
    
        private object[] TestData(int count)
        {
            var firstNames = new string[] { "Ed", "Tommy", "Aaron", "Abe", "Jamie", "Adam", "Dave", "David", "Jay", "Nicolas", "Nige" };
            var lastNames = new string[] { "Spencer", "Maintz", "Conran", "Elias", "Avins", "Mishcon", "Kaneda", "Davis", "Robinson", "Ferrero", "White" };
            var ratings = new int[] { 1, 2, 3, 4, 5 };
            var salaries = new int[] { 100, 400, 900, 1500, 1000000 };
    
            var data = new object[count];
            var rnd = new Random();
    
            for (int i = 0; i < count; i++)
            {
                var ratingId = rnd.Next(ratings.Length);
                var salaryId = rnd.Next(salaries.Length);
                var firstNameId = rnd.Next(firstNames.Length);
                var lastNameId = rnd.Next(lastNames.Length);
    
                var rating = ratings[ratingId];
                var salary = salaries[salaryId];
                var name = String.Format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
    
                data[i] = new object[] { name, rating, salary };
            }
    
            return data;
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Buffered Scrolling - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>Buffered 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>This example illustrates loading of all the records up front and buffering the rendering.</p>
            
            <ext:GridPanel 
                runat="server" 
                Title="Bufffered Grid of 5,000 random records" 
                DisableSelection="true"
                Width="700" 
                Height="500">
                <Store>
                    <ext:Store 
                        ID="Store1" 
                        runat="server" 
                        PageSize="5000" 
                        Buffered="true">                    
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="name" />
                                    <ext:ModelField Name="rating" Type="Int" />
                                    <ext:ModelField Name="salary" Type="Float" />
                                </Fields>
                            </ext:Model>
                        </Model>            
                    </ext:Store>
                </Store>            
                <View>
                    <ext:GridView runat="server" TrackOver="false" />
                </View>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:RowNumbererColumn runat="server" Width="40" Sortable="false" />
                        <ext:Column runat="server" Text="Name" Flex="1" DataIndex="name" />
                        <ext:Column runat="server" Text="Rating" Width="125" DataIndex="rating" />
                        <ext:Column runat="server" Text="Salary" Width="125" DataIndex="salary" Align="Right">
                            <Renderer Format="UsMoney" />
                        </ext:Column>                    
                    </Columns>
                </ColumnModel>            
            </ext:GridPanel>
        </form>
    </body>
    </html>
  3. #13
    It looks like there is a problem for group summary count when the group is too big?
    I don't see problem for my project since the group normally contains only less than 10 rows.
    Please advise if you foresee any potential problem.

    Here is the code:

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Linq" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.TestData(5000);
                this.Store1.DataBind();
            }
        }
    
        private object[] TestData(int count)
        {
            var firstNames = new string[] { "Ed", "Tommy", "Aaron", "Abe", "Jamie", "Adam", "Dave", "David", "Jay", "Nicolas", "Nige" };
            var lastNames = new string[] { "Spencer", "Maintz", "Conran", "Elias", "Avins", "Mishcon", "Kaneda", "Davis", "Robinson", "Ferrero", "White" };
            var ratings = new int[] { 1, 2, 3, 4, 5 };
            var salaries = new int[] { 100, 400, 900, 1500, 1000000 };
    
            var data = new object[count];
            var rnd = new Random();
    
            for (int i = 0; i < count; i++)
            {
                var ratingId = rnd.Next(ratings.Length);
                var salaryId = rnd.Next(salaries.Length);
                var firstNameId = rnd.Next(firstNames.Length);
                var lastNameId = rnd.Next(lastNames.Length);
    
                var rating = ratings[ratingId];
                var salary = salaries[salaryId];
                var name = String.Format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
    
                data[i] = new object[] { name, rating, salary };
            }
    
            return data;
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Buffered Scrolling - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" type="text/css" /> </head> <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <h1>Buffered 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>This example illustrates loading of all the records up front and buffering the rendering.</p>
            
            <ext:GridPanel ID="GridPanel1" 
                runat="server" 
                Title="Bufffered Grid of 5,000 random records" 
                DisableSelection="true"
                Width="700" 
                Height="500">
                <Store>
                    <ext:Store  GroupField="rating"
                        ID="Store1" 
                        runat="server" 
                        PageSize="5000" 
                        Buffered="true">                    
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="name" />
                                    <ext:ModelField Name="rating" Type="Int" />
                                    <ext:ModelField Name="salary" Type="Float" />
                                </Fields>
                            </ext:Model>
                        </Model>            
                    </ext:Store>
                </Store>            
                <View>
                    <ext:GridView ID="GridView1" runat="server" TrackOver="false" />
                </View>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="40" Sortable="false" />
                        <ext:Column ID="Column1" runat="server" Text="Name" Flex="1" DataIndex="name" />
                        <ext:SummaryColumn runat="server" Header="Rating" Width="125" DataIndex="rating" SummaryType="Count"/>
                        <ext:Column ID="Column3" runat="server" Text="Salary" Width="125" DataIndex="salary" Align="Right">
                            <Renderer Format="UsMoney" />
                        </ext:Column>                    
                    </Columns>
                </ColumnModel>   
                <Features>
                        <ext:GroupingSummary ID="GroupingView1" runat="server"  
                            HideGroupedHeader
                            ="false" EnableGroupingMenu="false"
                            GroupHeaderTpl='Rate {[values.rows[0].data.rating]}' />
                </Features>         
            </ext:GridPanel>
        </form>
    </body>
    </html>
  4. #14
    Grouping and Buffering are incompatible features.
    Grouping requires all records on the client side but buffering loads records on demand

    Grouping works incorrectly even with PagingToolbar

    I don't see problem for my project since the group normally contains only less than 10 rows.
    Because all (10) records are loaded to the store at once

    If you need grouping then you have to avoid buffering
  5. #15
    Once we disable buffering, we experience significant performance hit. Please see the attached screen-shot. Can you please advice what else we can do?

    Thanks.
    Attached Thumbnails Click image for larger version. 

Name:	ie_error.JPG 
Views:	71 
Size:	13.8 KB 
ID:	4132  
  6. #16
    We cannot advice anything new.
    Buffering anf grouping cannot be used in one grid. And large amount of data will decrease client side performance without buffering
    You have to choose between those evils: avoid grouping or avoid buffering (and expirience performance issues)

    Or try to change design: for example, use two grids. In first grid select required group and load records of that group to the second grid (with buffering)
  7. #17
    This is not acceptable. We just have 239 rows, and no more than 10 columns on the grid. And, we didn't have this problem until we port to v2.0.
  8. #18
    Well, 239 rows and 10 columns should not be big problem

    I created small test sample (500 rows and 11 columns) and I don't see that performance warning (I tested on very slow IE6 even)
    Here is my test case
    <%@ Page Language="C#" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head runat="server">
        <title></title>
    
    
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                var data = new List<object>();
    
    
                for (int i = 0; i < 500; i++)
                {
                    data.Add(new { 
                        Group = i % 100,
                        Value1 = "1_" + i,
                        Value2 = "2_" + i,
                        Value3 = "3_" + i,
                        Value4 = "4_" + i,
                        Value5 = "5_" + i,
                        Value6 = "6_" + i,
                        Value7 = "7_" + i,
                        Value8 = "8_" + i,
                        Value9 = "9_" + i,
                        Value10 = "10_" + i
                    });
                }
    
    
                GridPanel1.GetStore().DataSource = data;
                GridPanel1.GetStore().DataBind();
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server" 
                Width="600" 
                Height="450"
                Title="Grid" 
                Frame="true">
                <Store>
                    <ext:Store runat="server" GroupField="Group">                  
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="Group" />
                                    <ext:ModelField Name="Value1" />
                                    <ext:ModelField Name="Value2" />
                                    <ext:ModelField Name="Value3" />
                                    <ext:ModelField Name="Value4" />
                                    <ext:ModelField Name="Value5" />
                                    <ext:ModelField Name="Value6" />
                                    <ext:ModelField Name="Value7" />
                                    <ext:ModelField Name="Value8" />
                                    <ext:ModelField Name="Value9" />
                                    <ext:ModelField Name="Value10" />
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Sorters>
                            <ext:DataSorter Property="Group" Direction="ASC" />
                        </Sorters>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Group" DataIndex="Group" />
                        <ext:Column runat="server" Text="Value1" DataIndex="Value1" Flex="1" />
                        <ext:Column runat="server" Text="Value2" DataIndex="Value2" Flex="1" />
                        <ext:Column runat="server" Text="Value3" DataIndex="Value3" Flex="1" />
                        <ext:Column runat="server" Text="Value4" DataIndex="Value4" Flex="1" />
                        <ext:Column runat="server" Text="Value5" DataIndex="Value5" Flex="1" />
                        <ext:Column runat="server" Text="Value6" DataIndex="Value6" Flex="1" />
                        <ext:Column runat="server" Text="Value7" DataIndex="Value7" Flex="1" />
                        <ext:Column runat="server" Text="Value8" DataIndex="Value8" Flex="1" />
                        <ext:Column runat="server" Text="Value9" DataIndex="Value9" Flex="1" />
                        <ext:Column runat="server" Text="Value10" DataIndex="Value10" Flex="1" />
                    </Columns>
                </ColumnModel>                       
                <Features>
                    <ext:Grouping
                        runat="server"
                        HideGroupedHeader="true"
                        />
                </Features>
            </ext:GridPanel>
        </form>
    </body>
    </html>

    What exactly browser do you use? Please post your test sample
    Try to update from SVN first and retest. Few days ago we updated to ExtJS 4.1 RC3, may be client side performace is increased (client side performance depends from ExtJS only)
  9. #19
    We were using IE8, but the slowness is during databinding, in fact we have more than about 30 columns. Can you let us know if this would make a difference.
  10. #20
    but the slowness is during databinding
    Do you mean server side databinding?
Page 2 of 5 FirstFirst 1234 ... LastLast

Similar Threads

  1. [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
  2. Replies: 0
    Last Post: Oct 08, 2011, 8:02 PM
  3. [CLOSED] GridPanel RemoteSort
    By Marcelo in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 28, 2011, 8:12 PM
  4. [CLOSED] ServerMapping and RemoteSort
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Dec 17, 2009, 12:12 PM
  5. [CLOSED] Buffered Grid View Scrolling
    By bethc in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 02, 2009, 7:29 AM

Tags for this Thread

Posting Permissions