PDA

View Full Version : Grid Date Filter does not work after Grid reload (Ext.net 5.2)



idsonline
Sep 23, 2020, 1:13 PM
Hi,

after reloading a grid with date filter set (for column set to type date), the store info is lost and grid is displayed empty.
this effect only occurs while filtering in date columns. it is working for columns with other types (text, integer,...)
it is working in version 3.5 but not in 5.2.

Please see attachments,

breg
IDS

fabricio.murta
Sep 23, 2020, 7:42 PM
Hello @idsonline!

Providing screenshots helped understand what you see on your side, but does not help much in reproducing the issue. Screenshot of code helps us identify any mistake but makes it hard to tell you how exactly to fix them. In the case, I see what you get in the screens and that your code uses GridFilters plugin and the ext:DateFilter filter applied to a date-type column (and model field).

It seems the closest example we have in Examples Explorer is the Grid Panel > Plugins > GridFilters Local one (https://examples5.ext.net/#/GridPanel/Plugins/GridFilters_Local/). All missing there is just a means to refresh the view with the same data.

In fact just changing its code behind to:



protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.BindData();
}
}

protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)
{
this.BindData();
}

private void BindData()
{
this.Store1.DataSource = FiltersTestData.Data;
this.Store1.DataBind();
}


and adding OnReadData="MyData_Refresh" to the ext:Store block seems enough to fulfill the scenario. These changes in turn pulled off the Grid Panel > Array Grid > Array With Paging example (https://examples5.ext.net/#/GridPanel/ArrayGrid/ArrayWithPaging/).

I seem to reproduce the issue by changing the filter to "before 2015-jan-01" from the Date column filters, accessible from the column header's context menu; then pressing the re-enabled (un-hid) refresh button in the PagingToolbar.

May I ask you to try this example yourself and confirm whether it reproduces the issue you're facing? Meanwhile, I'm looking up something, because I believe some additional steps are required to maintain filtering over refreshes in grid panels.



<%@ Page Language="C#" %>

<%@ Import Namespace="System.Collections.Generic" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.BindData();
}
}

protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)
{
this.BindData();
}

private void BindData()
{
this.Store1.DataSource = new List<object>
{
new { Id = 1, Price = 71.72, Company = "3m Co", Date = new DateTime(2014, 9, 1), Size = "large", Visible = true },
new { Id = 2, Price = 29.01, Company = "Aloca Inc", Date = new DateTime(2014, 08, 01), Size = "medium", Visible = false },
new { Id = 3, Price = 83.81, Company = "Altria Group Inc", Date = new DateTime(2014, 08, 03), Size = "large", Visible = false },
new { Id = 4, Price = 52.55, Company = "American Express Company", Date = new DateTime(2015, 01, 04), Size = "extra large", Visible = true },
new { Id = 5, Price = 64.13, Company = "American International Group Inc.", Date = new DateTime(2015, 03, 04), Size = "small", Visible = true },
new { Id = 6, Price = 31.61, Company = "AT&T Inc.", Date = new DateTime(2015, 02, 01), Size = "extra large", Visible = false },
new { Id = 7, Price = 75.43, Company = "Boeing Co.", Date = new DateTime(2015, 01, 01), Size = "large", Visible = true },
new { Id = 8, Price = 67.27, Company = "Caterpillar Inc.", Date = new DateTime(2014, 12, 03), Size = "medium", Visible = true },
new { Id = 9, Price = 49.37, Company = "Citigroup, Inc.", Date = new DateTime(2014, 11, 24), Size = "large", Visible = true },
new { Id = 10, Price = 40.48, Company = "E.I. du Pont de Nemours and Company", Date = new DateTime(2014, 05, 09), Size = "extra large", Visible = false }
};

this.Store1.DataBind();
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>GridPanel with Local Filtering and Paging - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<ext:ResourceManager runat="server" />

<h1>GridPanel with Local Filtering, Sorting and Paging</h1>

<p>Please see column header menu for applying filters</p>

<ext:Window
runat="server"
Width="950"
Height="480"
Closable="false"
Collapsible="true"
Title="Example"
Maximizable="true"
Layout="Fit">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" Border="false">
<Store>
<ext:Store ID="Store1" runat="server" PageSize="10" OnReadData="MyData_Refresh">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Company" Type="String" />
<ext:ModelField Name="Price" Type="Float" />
<ext:ModelField Name="Date" Type="Date" />
<ext:ModelField Name="Size" Type="String" />
<ext:ModelField Name="Visible" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Company" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="ID" DataIndex="Id">
<Filter>
<ext:NumberFilter />
</Filter>
</ext:Column>
<ext:Column
ID="CompanyColumn"
runat="server"
Text="Company"
DataIndex="Company"
Flex="1">
<Filter>
<ext:StringFilter />
</Filter>
</ext:Column>
<ext:DateColumn
runat="server"
Text="Date"
DataIndex="Date"
Align="Center"
Format="yyyy-MM-dd">
<Filter>
<ext:DateFilter>
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
</Filter>
</ext:DateColumn>
<ext:Column runat="server" Text="Size" DataIndex="Size">
<Filter>
<ext:ListFilter Options="extra small,small,medium,large,extra large" />
</Filter>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:GridFilters runat="server" />
</Plugins>
<BottomBar>
<ext:PagingToolbar runat="server" HideRefresh="False">
<Items>
<ext:Button runat="server" Text="Clear Filters" Handler="this.up('grid').filters.clearFilters();" />
</Items>
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Window>
</body>
</html>


By the way, you could keep the project you test this example handy, in case you face other issues and report here, you could use it to draw simple test cases on the issues you face.

Will post a follow-up with the outcome of the research about the issue soon.

fabricio.murta
Sep 23, 2020, 7:53 PM
Hello again @idsonline!

Turns out we already have this issue logged, and we didn't have the opportunity -- nor Sencha did -- to fix it in the meanwhile, unfortunately.

Good news is that in the actual issue the person that reported it himself provided a workaround that worked for him, maybe it's worth a try for you until we have the issue sorted out.

Please subscribe to the thread below, we will post there as soon as the fix is implemented (or brought in from Ext JS updates) to let everyone interested in that feature know it's been fixed:

- DateFilter on GridFilters - load of store resets value and deselects filter checkboxes (https://forums.ext.net/showthread.php?62710)

Hope you don't mind following the other thread.

idsonline
Sep 25, 2020, 8:45 AM
Hello,

we checked your proposal and were able to reproduce the error. Please send us the solution to this problem/bug

breg

fabricio.murta
Sep 25, 2020, 9:40 PM
Hello Breg!

Thanks for confirming that's the issue you're having there. Have you had an opportunity to review our previous post in this thread (https://forums.ext.net/showthread.php?62983&p=285970&viewfull=1#post285970), where we discuss this is a known issue?