Feb 06, 2013, 7:06 PM
[CLOSED] Buffered Grid Scrolling repeats rows
Hello,
I have a buffered grid with both remote sort and filter that I'm getting a strange behavior when scrolling down the grid that I'll try to explain clearly, I'm including an example that shows the behavior. In the example PageSize is set to 100 and when I start scrolling down the grid when I get to about row #125 it seems to lose it's place and the data in the row starts repeating rows from the beginning of the grid, but the row number keeps incrementing normally. If you keep scrolling the next approx. 125 rows it will happen again. Changing the PageSize changes when it happens, so if I set PageSize to 150, it will start repeating around row #175. I've tried playing with other properties like the Buffer Zones but I can't seem to pinpoint what I'm doing wrong. I'm using version 2.1.1 in VS2010 w/.NET 4.0, see it in both IE8 and Chrome. Thanks in advance.
JW
I have a buffered grid with both remote sort and filter that I'm getting a strange behavior when scrolling down the grid that I'll try to explain clearly, I'm including an example that shows the behavior. In the example PageSize is set to 100 and when I start scrolling down the grid when I get to about row #125 it seems to lose it's place and the data in the row starts repeating rows from the beginning of the grid, but the row number keeps incrementing normally. If you keep scrolling the next approx. 125 rows it will happen again. Changing the PageSize changes when it happens, so if I set PageSize to 150, it will start repeating around row #175. I've tried playing with other properties like the Buffer Zones but I can't seem to pinpoint what I'm doing wrong. I'm using version 2.1.1 in VS2010 w/.NET 4.0, see it in both IE8 and Chrome. Thanks in advance.
JW
<%@ Page Language="C#"%>
<%@ 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.dynData;
}
}
private List<object> dynData
{
get
{
List<object> comps = new List<object> { };
for (int i = 0; i < 500; i++)
{
comps.Add(new {company = "Company " + i, price = 71.72, change = 0.02, pctChange = 0.03, lastCahnge = new DateTime(2013, 9, 1) });
}
return comps;
}
}
protected void Store1_RefreshData(object sender, StoreReadDataEventArgs e)
{
List<object> data = this.dynData;
string s = e.Parameters[this.GridFilters1.ParamPrefix];
//-- start filtering ------------------------------------------------------------
if (!string.IsNullOrEmpty(s))
{
FilterConditions fc = new FilterConditions(s);
foreach (FilterCondition condition in fc.Conditions)
{
Comparison comparison = condition.Comparison;
string field = condition.Field;
FilterType type = condition.Type;
object value;
switch (condition.Type)
{
case FilterType.Boolean:
value = condition.Value<bool>();
break;
case FilterType.Date:
value = condition.Value<DateTime>();
break;
case FilterType.List:
value = condition.List;
break;
case FilterType.Numeric:
if (data.Count > 0 && data[0].GetType().GetProperty(field).PropertyType == typeof(int))
{
value = condition.Value<int>();
}
else
{
value = condition.Value<double>();
}
break;
case FilterType.String:
value = condition.Value<string>();
break;
default:
throw new ArgumentOutOfRangeException();
}
data.RemoveAll(
item =>
{
object oValue = item.GetType().GetProperty(field).GetValue(item, null);
IComparable cItem = oValue as IComparable;
switch (comparison)
{
case Comparison.Eq:
switch (type)
{
case FilterType.List:
return !(value as List<string>).Contains(oValue.ToString());
case FilterType.String:
return !oValue.ToString().StartsWith(value.ToString());
default:
return !cItem.Equals(value);
}
case Comparison.Gt:
return cItem.CompareTo(value) < 1;
case Comparison.Lt:
return cItem.CompareTo(value) > -1;
default:
throw new ArgumentOutOfRangeException();
}
}
);
}
}
//-- end filtering ------------------------------------------------------------
//-- start sorting ------------------------------------------------------------
if (e.Sort.Length > 0)
{
data.Sort(delegate(object x, object y)
{
object a;
object b;
int direction = e.Sort[0].Direction == Ext.Net.SortDirection.DESC ? -1 : 1;
a = x.GetType().GetProperty(e.Sort[0].Property).GetValue(x, null);
b = y.GetType().GetProperty(e.Sort[0].Property).GetValue(y, null);
return CaseInsensitiveComparer.Default.Compare(a, b) * direction;
});
}
//-- end sorting ------------------------------------------------------------
this.GridPanel1.GetStore().DataSource = data;
}
protected void Button1_Click(object sender, DirectEventArgs e)
{
RowSelectionModel selRows = GridPanel1.GetSelectionModel() as RowSelectionModel;
this.Store1.DataSource = this.dynData;
selRows.ClearSelection();
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
var template = '<span style="color:{0};">{1}</span>';
var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};
var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ExtResourceManager" runat="server" DisableViewState="false" RenderStyles="Embedded"></ext:ResourceManager>
<ext:GridPanel ID="GridPanel1" runat="server" Title="Sample Grid" Width="650" Height="350" EnableColumnMove="false">
<Store>
<ext:Store ID="Store1" runat="server" Buffered="true" PageSize="100" RemoteSort="true"
RemoteFilter="true" OnReadData="Store1_RefreshData" LeadingBufferZone="50" TrailingBufferZone="50">
<Proxy>
<ext:PageProxy/>
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel OverflowY="Auto">
<Columns>
<ext:RowNumbererColumn Width="50"></ext:RowNumbererColumn>
<ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
<ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change">
<Renderer Fn="change" />
</ext:Column>
<ext:Column ID="Column4" runat="server" Text="Change" DataIndex="pctChange">
<Renderer Fn="pctChange" />
</ext:Column>
<ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" DataIndex="lastChange" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" Mode="Single" AllowDeselect="true" ShowHeaderCheckbox="false"></ext:CheckboxSelectionModel>
</SelectionModel>
<Features>
<ext:GridFilters ID="GridFilters1" runat="server" Local="false" Enabled="true">
<Filters>
<ext:StringFilter DataIndex="company"></ext:StringFilter>
</Filters>
</ext:GridFilters>
</Features>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by Daniil; Feb 09, 2013 at 5:49 AM.
Reason: [CLOSED]
Originally Posted by Baidaly
