[OPEN] [#355] Infinite scrolling with server-side searching has got some issue

  1. #1

    [OPEN] [#355] Infinite scrolling with server-side searching has got some issue

    Greetings...

    need help?
    I have on the page grid, store and UI for searching/filtering purpose. the store is configured to use server-side buffering which works perfectly.
    After selecting some searching criteria and do the search on server-side the grid doesn't display
    the search recordset although through tracing i found out the store contains new recordset from the searching. see the sample code down.

    MockUp.aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MockUp.aspx.cs" Inherits="MockUp" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Mockup</title>
    </head>
    <body>
    
        <form id="Form2" runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:GridPanel
                runat="server"
                Width="500"
                Height="500"
                DisableSelection="true"
                Title="Profile List">
                <Store>
                    <ext:Store
                        ID="sPerson"
                        runat="server"
                        Buffered="true"
                        PageSize="200"
                        TrailingBufferZone="10"
                        LeadingBufferZone="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="Id" />
                                    <ext:ModelField Name="Name" />
                                    <ext:ModelField Name="Rating" Type="Int" />
                                    <ext:ModelField Name="Salary" Type="Float" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <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>
                <View>
                    <ext:GridView runat="server" TrackOver="false" />
                </View>
                <DockedItems>
                    <ext:Toolbar runat="server" Dock="Top">
                        <Items>
                            <ext:NumberField
                                runat="server"
                                ID="numRating"
                                FieldLabel="Rating" />
                            <ext:Button
                                ID="FilterButton"
                                runat="server"
                                Text="Filter"
                                Icon="Accept">
                                <DirectEvents>
                                    <Click OnEvent="OnFilter">
                                        <EventMask ShowMask="true" />
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </DockedItems>
            </ext:GridPanel>
        </form>
    </body>
    </html>

    MockUp.aspx.cs

    public partial class MockUp : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void Store_ReadData(object sender, StoreReadDataEventArgs e)
            {
                Store store = (Store)sender;
                int? rating = default(int?);
                int count;
    
                if (!string.IsNullOrEmpty(numRating.Text))
                    rating = int.Parse(numRating.Text);
    
                store.Data = GetDataPaged(rating, e.Start, e.Limit, out count);
                e.Total = count;
            }
    
            private List<PersonData> GetDataPaged(int? byRating, int start, int limit, out int count)
            {
                string[] firstNames = new string[] { "Ed", "Tommy", "Aaron", "Abe", "Jamie", "Adam", "Dave", "David", "Jay", "Nicolas", "Nige" };
                string[] lastNames = new string[] { "Spencer", "Maintz", "Conran", "Elias", "Avins", "Mishcon", "Kaneda", "Davis", "Robinson", "Ferrero", "White" };
                int[] ratings = new int[] { 1, 2, 3, 4, 5 };
                int[] salaries = new int[] { 100, 400, 900, 1500, 1000000 };
    
                List<PersonData> data = new List<PersonData>(5000);
                Random rnd = new Random();
    
                for (int i = 0; i < 5000; i++)
                {
                    int ratingId = rnd.Next(ratings.Length);
                    int salaryId = rnd.Next(salaries.Length);
                    int firstNameId = rnd.Next(firstNames.Length);
                    int lastNameId = rnd.Next(lastNames.Length);
    
                    int rating = ratings[ratingId];
                    int salary = salaries[salaryId];
                    string name = String.Format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
                    string id = "rec-" + i;
    
                    data.Add(new PersonData { Id = id, Name = name, Rating = rating, Salary = salary });
                }
    
    
                if (byRating.HasValue)
                    data = data.Where(t => t.Rating == byRating).ToList();
    
                count = data.Count();
    
                return data.Skip(start)
                            .Take(limit)
                            .ToList(); ;
            }
    
            class PersonData
            {
                public string Id { get; set; }
                public string Name { get; set; }
                public int Rating { get; set; }
                public int Salary { get; set; }
            }
    
            protected void OnFilter(object sender, DirectEventArgs e)
            {
                sPerson.Reload();
            }
        }
    Last edited by Daniil; Oct 02, 2013 at 5:57 AM. Reason: [OPEN] [#355]
  2. #2
    Hello!

    Can you provide a full sample to reproduce without reading data from database. Please, read this thread: http://forums.ext.net/showthread.php?10205

    Also, I think this example can help to create the sample: https://examples2.ext.net/#/GridPane...ling/Overview/
  3. #3
    Quote Originally Posted by Baidaly View Post
    Hello!

    Can you provide a full sample to reproduce without reading data from database. Please, read this thread: http://forums.ext.net/showthread.php?10205

    Also, I think this example can help to create the sample: https://examples2.ext.net/#/GridPane...ling/Overview/

    please refere the original post I modified the code and provided a working sample which doesn't require
    connecting with database as you requested it.
  4. #4
    Thank you for your sample. We are investigating.
  5. #5
    Hi everybody,

    I think it is a bug. A GridPanel seems don't update the first page.

    As a workaround I can suggest to try:
    protected void OnFilter(object sender, DirectEventArgs e)
    {
        sPerson.On("load", new JFunction()
        {
            Handler = "App.GridPanel1.getView().refresh()"
        }, null, new HandlerConfig() { Single = true });
        
        sPerson.Reload();
    }
    Reported to Sencha.
    http://www.sencha.com/forum/showthread.php?272957

    Also created an Issue to track the defect.
    https://github.com/extnet/Ext.NET/issues/355
  6. #6
    Quote Originally Posted by Daniil View Post
    Hi everybody,

    I think it is a bug. A GridPanel seems don't update the first page.

    As a workaround I can suggest to try:
    protected void OnFilter(object sender, DirectEventArgs e)
    {
        sPerson.On("load", new JFunction()
        {
            Handler = "App.GridPanel1.getView().refresh()"
        }, null, new HandlerConfig() { Single = true });
        
        sPerson.Reload();
    }
    Reported to Sencha.
    http://www.sencha.com/forum/showthread.php?272957

    Also created an Issue to track the defect.
    https://github.com/extnet/Ext.NET/issues/355
    i also find another workaround...i handled the filter button click event on the client side instead of the server-side/direct event.
    it solves the problem. just look the code down:



     var loadData = function (store) {
                    store.clearData();
                    store.load();
                };

              <ext:Button
                                ID="FilterButton"
                                runat="server"
                                Text="Filter"
                                Icon="Accept">
                                <Listeners>
                                    <Click Handler="loadData(#{store});"></Click>
                                </Listeners>
                          </ext:Button>
    Last edited by dannyrih; Oct 07, 2013 at 3:01 PM.
  7. #7
    Thanks for sharing. Yes, a clearData might be a solution.

    P.S. If you can edit the code blocks in your post, it would be nice. Just it is one line.

Similar Threads

  1. [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
  2. 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
  3. Replies: 2
    Last Post: Oct 17, 2012, 1:43 PM
  4. [CLOSED] Infinite Scrolling with MVC
    By RCN in forum 2.x Legacy Premium Help
    Replies: 14
    Last Post: Apr 12, 2012, 6:27 PM

Posting Permissions