PDA

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



dannyrih
Sep 30, 2013, 5:34 PM
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();
}
}

Baidaly
Sep 30, 2013, 7:41 PM
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: http://examples2.ext.net/#/GridPanel/Infinite_Scrolling/Overview/

dannyrih
Oct 01, 2013, 8:22 AM
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: http://examples2.ext.net/#/GridPanel/Infinite_Scrolling/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.

Baidaly
Oct 01, 2013, 9:55 PM
Thank you for your sample. We are investigating.

Daniil
Oct 02, 2013, 5:56 AM
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

dannyrih
Oct 07, 2013, 2:22 PM
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>

Daniil
Oct 07, 2013, 2:41 PM
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.