I have a paginated grid with a loader. every time i scroll down, the grid reloads itself.
this is a critical bug so please dont release a version without fixing this.
i dont have a standalone case yet.
/Z
I have a paginated grid with a loader. every time i scroll down, the grid reloads itself.
this is a critical bug so please dont release a version without fixing this.
i dont have a standalone case yet.
/Z
Hello @Z!
You mean this bug is not reproducible in Ext.NET 4.2.1 from NuGet but it is from latest sources from github? Needless to say, we are left just wondering without more information about the issue and how to reproduce it.
We really appreciate the feedback you are providing us and we would love to be able to tackle with the issue. Don't worry if the release happens without this, not always we can add everything we'd like to the release (or releases could never end up happening at all). But we'll do our best: if it does not make it to the next public release, it still can be fixed in github even the day after the release!
Looking forward to more details on this issue.
So i would consider this a super critical defect and would definitely fix it before releasing.
Basically, the crux of the issue is that when we are "scrolling" with the scrollbar, EXT is firing the PagingToolbar "select" handler.
it happens that we call "reload" in this handler so the bug was obvious to us. If we didnt have a reload, we might have missed this.
again, this is super critical as we use this pagination everywhere so please fix before releasing.
Steps to reproduce:
1. load page
2. press loadME button (50 records)
3. now change the combo (in paging toolbar) from 50 to 500.
4. after it reloads, use the scrollbar on the right to scroll.
few items to note.
* using the mouse wheel doesnt cause the bug, only using the right scrollbar
* if you have more than 500 records total, the bug doesnt occur, so we set the controller GetData2 function to 245 elements.
Thanks,
/Z
aspx
controllerCode:<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Search TestMe</title>
</head>
<body>
<form id="FormSearchTestMe" runat="server">
<ext:ResourceManager ID="ResourceManagerSearchTestMe" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
<Items>
<ext:Panel Layout="CardLayout" runat="server" AutoWidth="true" ActiveIndex="0" ID="SearchCardContainer" Border="False">
<BottomBar>
<ext:Toolbar ID="ToolbarSearchTestMe" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Load ME" Icon="Find">
<Listeners>
<Click Handler="App.GridPanelSearchResults.getStore().reload();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
<Items>
<ext:GridPanel
ID="GridPanelSearchResults"
runat="server"
Hidden="true"
Layout="FitLayout"
Anchor="100% 100%"
AutoRender="true">
<Store>
<ext:Store ID="StoreSearchResults" runat="server" RemoteSort="false" AutoLoad="false" PageSize="50">
<Proxy>
<ext:AjaxProxy Url="/ta/Support/GetData2">
<ActionMethods READ="GET" />
<Reader>
<ext:JsonReader RootProperty="data" IDProperty="id" TotalProperty="total"/>
</Reader>
</ext:AjaxProxy>
</Proxy>
<Parameters>
<ext:StoreParameter Name="limit" Value="#{StoreSearchResults}.pageSize" Mode="Raw" />
</Parameters>
<Model>
<ext:Model ID="Model9" IDProperty="id" runat="server">
<Fields>
<ext:ModelField Name="id" Type="Int" />
<ext:ModelField Name="data1" Type="String" />
<ext:ModelField Name="data2" Type="String" />
<ext:ModelField Name="data3" Type="String" />
<ext:ModelField Name="data4" Type="String" />
<ext:ModelField Name="data5" Type="String" />
<ext:ModelField Name="data6" Type="Date" />
<ext:ModelField Name="data7" Type="String" />
<ext:ModelField Name="data8" Type="String" />
<ext:ModelField Name="data9" Type="Int" />
<ext:ModelField Name="data10" Type="Int" />
<ext:ModelField Name="data11" Type="Int" />
<ext:ModelField Name="data12" Type="Int" />
<ext:ModelField Name="data13" Type="String" />
<ext:ModelField Name="data14" Type="String" />
<ext:ModelField Name="data15" Type="String" />
<ext:ModelField Name="data16" Type="String" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="data6" Direction="DESC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModelSearchTestMes" runat="server">
<Columns>
<ext:Column runat="server" ID="id" Text="Id" DataIndex="id" Width="50" Sortable="true" Hidden="true" />
<ext:Column runat="server" ID="data1" Text="Data1" DataIndex="data1" Width="100" Sortable="true" />
<ext:Column runat="server" ID="data2" Text="Data2" DataIndex="data2" Width="100" Sortable="true" />
<ext:Column runat="server" ID="data3" Text="Data3" DataIndex="data3" Width="110" Sortable="true" />
<ext:Column runat="server" ID="data4" Text="Data4" DataIndex="data4" Width="110" Sortable="true" />
<ext:Column runat="server" ID="data5" Text="Data5" DataIndex="data5" Width="100" Sortable="true" />
<ext:Column runat="server" ID="data7" Text="Data7" DataIndex="data7" Width="75" Sortable="true" />
<ext:Column runat="server" ID="data8" Text="Data8" DataIndex="data8" Width="75" Sortable="true" />
<ext:Column runat="server" ID="data13" Text="Data13" DataIndex="data13" Width="75" Align="End" Sortable="true" />
<ext:Column runat="server" ID="data14" Text="Data14" DataIndex="data14" Width="75" Align="End" Sortable="true" />
<ext:Column runat="server" ID="data15" Text="Data15" DataIndex="data15" Width="75" Align="End" Sortable="true" />
<ext:Column runat="server" ID="data16" Text="Data16" DataIndex="data16" Width="75" Align="End" Sortable="true" />
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1"
runat="server"
DisplayInfo="true"
DisplayMsg="Displaying results {0} - {1} of {2}"
EmptyMsg="No results to display">
<Items>
<ext:Label ID="Label1" runat="server" Text="Page size:" />
<ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="5" />
<ext:ComboBox ID="ComboBoxPaging" runat="server" Width="50" Editable="false">
<Items>
<ext:ListItem Text="50" />
<ext:ListItem Text="100" />
<ext:ListItem Text="250" />
<ext:ListItem Text="500" />
</Items>
<SelectedItems><ext:ListItem Value="50" /></SelectedItems>
<ListConfig Width="50" />
<Listeners>
<Select Handler="#{StoreSearchResults}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.getStore().load();" />
<AfterRender Handler="var size = 50; #{StoreSearchResults}.pageSize = parseInt(size); this.setValue(size);" />
</Listeners>
</ext:ComboBox>
</Items>
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
classCode:public ActionResult GetData2(int? start, int? limit, string sort, string dir)
{
List<TestData2> l = new List<TestData2>();
for (int i = 0; i < 245; i++)
{
TestData2 t = new TestData2();
t.id = i;
t.data1 = "test_" + i;
t.data2 = "test_" + i;
t.data3 = "test_" + i;
t.data4 = "test_" + i;
t.data5 = "test_" + i;
t.data6 = DateTime.Now.AddDays(i);
t.data7 = "test_" + i;
t.data8 = "test_" + i;
t.data9 = i;
t.data10 = i;
t.data11 = i;
t.data12 = i;
t.data13 = "test_" + i;
t.data14 = "test_" + i;
t.data15 = "test_" + i;
t.data16 = "test_" + i;
l.Add(t);
}
var query = l.Select(dt => new
{
id = dt.id,
data1 = dt.data1,
data2 = dt.data2,
data3 = dt.data3,
data4 = dt.data4,
data5 = dt.data5,
data6 = dt.data6,
data7 = dt.data7,
data8 = dt.data8,
data9 = dt.data9,
data10 = dt.data10,
data11 = dt.data11,
data12 = dt.data12,
data13 = dt.data13,
data14 = dt.data14,
data15 = dt.data15,
data16 = dt.data16
}).OrderBy(d => d.id);
return this.Store(query.Skip(start.HasValue ? start.Value : 0).Take(limit.HasValue ? limit.Value : 500), query.Count());
}
Code:public class TestData2
{
public long id;
public string data1;
public string data2;
public string data3;
public string data4;
public string data5;
public DateTime data6;
public string data7;
public string data8;
public int data9;
public int data10;
public int data11;
public int data12;
public string data13;
public string data14;
public string data15;
public string data16;
}
and yes, i think this bug is only on trunk, but it should be easy for you to re-test on 4.2.1
/Z
Hello @Z!
Thanks for the test case! I do see a misbehavior in the combo box's select event. For example, it does not fire on load as it gets an effective selection. Second, at some point if I expand the combo box and select the same value, the event should be firing as well. Yes, this event means just that you are selecting an entry.
Nevertheless, I doubt this is the desired behavior you are looking for. In fact, I believe you want to use in your combobox, at line 117 of your ASPX code, a Change handler instead. The odds to Select are towards it firing every time any selection occurs to the combo box.
Notice it may be undesirable for you, as it fires on load, to call the store load at once (well, it gets the value of '50' so it does what it is supposed to with that).
In your example, if you must bind the store loading to the 'Load Me' click, then you can just set another variable on click (say,#{StoreSearchResults}.userLoaded = true) and then check if it is true from the page size combo box's 'change' handler.
Notwithstanding, I suggest you to use store's reload() instead of load() (links are to ExtJS 6.2.1 documentation on the store methods).
The changes I suggested above are reflected in this reviewed version of your test case. Please notice paths to the MVC endpoints will differ from yours:
I hope this helps!Code:<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Search TestMe</title>
</head>
<body>
<form id="FormSearchTestMe" runat="server">
<ext:ResourceManager ID="ResourceManagerSearchTestMe" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
<Items>
<ext:Panel Layout="CardLayout" runat="server" AutoWidth="true" ActiveIndex="0" ID="SearchCardContainer" Border="False">
<BottomBar>
<ext:Toolbar ID="ToolbarSearchTestMe" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Load ME" Icon="Find">
<Listeners>
<Click Handler="App.StoreSearchResults.userLoaded = true; App.GridPanelSearchResults.getStore().reload();" />
</Listeners>
</ext:Button>
<ext:Component ID="lastSelect" runat="server" Html="Last Select trigger event: never" />
</Items>
</ext:Toolbar>
</BottomBar>
<Items>
<ext:GridPanel
ID="GridPanelSearchResults"
runat="server"
Hidden="true"
Layout="FitLayout"
Anchor="100% 100%"
AutoRender="true">
<Store>
<ext:Store ID="StoreSearchResults" runat="server" RemoteSort="false" AutoLoad="false" PageSize="50">
<Proxy>
<ext:AjaxProxy Url="/issues/c61977_getData">
<ActionMethods READ="GET" />
<Reader>
<ext:JsonReader RootProperty="data" IDProperty="id" TotalProperty="total"/>
</Reader>
</ext:AjaxProxy>
</Proxy>
<Parameters>
<ext:StoreParameter Name="limit" Value="App.StoreSearchResults.pageSize" Mode="Raw" />
</Parameters>
<Model>
<ext:Model ID="Model9" IDProperty="id" runat="server">
<Fields>
<ext:ModelField Name="id" Type="Int" />
<ext:ModelField Name="data1" Type="String" />
<ext:ModelField Name="data2" Type="String" />
<ext:ModelField Name="data3" Type="String" />
<ext:ModelField Name="data4" Type="String" />
<ext:ModelField Name="data5" Type="String" />
<ext:ModelField Name="data6" Type="Date" />
<ext:ModelField Name="data7" Type="String" />
<ext:ModelField Name="data8" Type="String" />
<ext:ModelField Name="data9" Type="Int" />
<ext:ModelField Name="data10" Type="Int" />
<ext:ModelField Name="data11" Type="Int" />
<ext:ModelField Name="data12" Type="Int" />
<ext:ModelField Name="data13" Type="String" />
<ext:ModelField Name="data14" Type="String" />
<ext:ModelField Name="data15" Type="String" />
<ext:ModelField Name="data16" Type="String" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="data6" Direction="DESC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModelSearchTestMes" runat="server">
<Columns>
<ext:Column runat="server" ID="id" Text="Id" DataIndex="id" Width="50" Sortable="true" Hidden="true" />
<ext:Column runat="server" ID="data1" Text="Data1" DataIndex="data1" Width="100" Sortable="true" />
<ext:Column runat="server" ID="data2" Text="Data2" DataIndex="data2" Width="100" Sortable="true" />
<ext:Column runat="server" ID="data3" Text="Data3" DataIndex="data3" Width="110" Sortable="true" />
<ext:Column runat="server" ID="data4" Text="Data4" DataIndex="data4" Width="110" Sortable="true" />
<ext:Column runat="server" ID="data5" Text="Data5" DataIndex="data5" Width="100" Sortable="true" />
<ext:Column runat="server" ID="data7" Text="Data7" DataIndex="data7" Width="75" Sortable="true" />
<ext:Column runat="server" ID="data8" Text="Data8" DataIndex="data8" Width="75" Sortable="true" />
<ext:Column runat="server" ID="data13" Text="Data13" DataIndex="data13" Width="75" Align="End" Sortable="true" />
<ext:Column runat="server" ID="data14" Text="Data14" DataIndex="data14" Width="75" Align="End" Sortable="true" />
<ext:Column runat="server" ID="data15" Text="Data15" DataIndex="data15" Width="75" Align="End" Sortable="true" />
<ext:Column runat="server" ID="data16" Text="Data16" DataIndex="data16" Width="75" Align="End" Sortable="true" />
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1"
runat="server"
DisplayInfo="true"
DisplayMsg="Displaying results {0} - {1} of {2}"
EmptyMsg="No results to display"
>
<Items>
<ext:Label ID="Label1" runat="server" Text="Page size:" />
<ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="5" />
<ext:ComboBox ID="ComboBoxPaging" runat="server" Width="90" Editable="false">
<Items>
<ext:ListItem Text="50" />
<ext:ListItem Text="100" />
<ext:ListItem Text="250" />
<ext:ListItem Text="500" />
</Items>
<SelectedItems><ext:ListItem Value="50" /></SelectedItems>
<ListConfig Width="50" />
<Listeners>
<Change Handler="if (#{StoreSearchResults}.userLoaded) { App.lastSelect.setHtml('Last Change trigger event: '+Date()); App.StoreSearchResults.pageSize = parseInt(this.getValue()); App.PagingToolbar1.getStore().reload(); }" />
<AfterRender Handler="var size = 50; App.StoreSearchResults.pageSize = parseInt(size); this.setValue(size);" />
</Listeners>
</ext:ComboBox>
</Items>
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
I see 4.2.2 was just released. Good news is that 4.2.2 fixes the reload bug that was on trunk.
/Z
Hello @Z!
Thanks for the feedback! Interesting, cause 4.2.2 is pretty much what current master branch is in github. But anyway, glad it is now fixed for you!