Aug 30, 2019, 10:55 AM
[OPEN] [#1669] DateFilter on GridFilters - load of store resets value and deselects filter checkboxes
I'm using EXT 4.8.1.
Using: GridFilters plugin and specifically a dateFilter
The load of store causes wrong values for DateFilter and deselects filter checkboxes(before,on,after)
I'm using a slightly modified example of "GridPanel with Local Filtering, Sorting and Paging"
It also shows:
in JS did not change anything.
The steps to reproduce the problem are:
1. Set DateFilter to: before: 2015.01.01.
2. Press AllFilters - it shows the correct time
3. Press "reload store" button - "before" checkbox is now deselected
4. 2. Press AllFilters again - it shows 1970-01-01T02:00:00
aspx:
Using: GridFilters plugin and specifically a dateFilter
The load of store causes wrong values for DateFilter and deselects filter checkboxes(before,on,after)
I'm using a slightly modified example of "GridPanel with Local Filtering, Sorting and Paging"
It also shows:
WARNING: According to WAI-ARIA 1.0 Authoring guide (http://www.w3.org/TR/wai-aria-practices/#menubutton), menu button 'button-1067' should display the menu on SPACE and ENTER keys, which will conflict with the button handler.
Setting Ext.enableAriaButtons = false; Ext.enableAriaPanels = false; in JS did not change anything.
The steps to reproduce the problem are:
1. Set DateFilter to: before: 2015.01.01.
2. Press AllFilters - it shows the correct time
3. Press "reload store" button - "before" checkbox is now deselected
4. 2. Press AllFilters again - it shows 1970-01-01T02:00:00
aspx:
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
GridPanel1.GetStore().DataSource = FiltersTestData.Data;
}
}
public void MyData_Refresh(object sender, StoreReadDataEventArgs e)
{
resMan.AddScript("alert('Refresh');");
GridPanel1.GetStore().DataSource = FiltersTestData.Data;
GridPanel1.GetStore().DataBind();
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<ext:ResourceManager runat="server" ID="resMan" />
<title>GridPanel with Local Filtering, Sorting and Paging - Ext.NET Examples</title>
<script>
var getFilters = function () {
var out = [],
filters = this.up('grid').store.getFilters().items,
length = filters.length,
i;
for (i = 0; i < length; i++) {
out[i] = filters[i].serialize();
}
Ext.Msg.alert('Filters', Ext.encode(out));
};
</script>
</head>
<body>
<h1>GridPanel with Local Filtering, Sorting and Paging</h1>
<ext:Window
runat="server"
Width="950"
Height="300"
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="100" GroupField="Name" OnRefreshData="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:Column runat="server" Text="Price" DataIndex="Price">
<Renderer Format="UsMoney" />
<Filter>
<ext:NumberFilter />
</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>
<ext:Column runat="server" Text="Visible" DataIndex="Visible" Align="Center">
<Renderer Handler="return (value) ? 'Yes':'No';" />
<Filter>
<ext:BooleanFilter />
</Filter>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:GridFilters runat="server" />
</Plugins>
<BottomBar>
<ext:PagingToolbar runat="server" HideRefresh="true" EnableOverflow="true" OverflowHandler="Scroller">
<Items>
<ext:Button
runat="server"
Text="All Filters"
ToolTip="Get Filters of Grid"
Handler="getFilters" />
<ext:Button runat="server" Text="Clear Filters" Handler="this.up('grid').filters.clearFilters();" />
<ext:Button Text="reload store" runat="server">
<Listeners>
<Click Handler="alert('Reload'); App.Store1.load();" />
</Listeners>
</ext:Button>
</Items>
<Plugins>
</Plugins>
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Window>
</body>
</html>
Example data loaded (cs):using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public class FiltersTestData
{
public static List<object> Data
{
get
{
List<object> goods = 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
},
new
{
Id = 11,
Price = 68.1,
Company = "Exxon Mobile Corp",
Date = new DateTime(2014, 12, 12),
Size = "large",
Visible = true
},
new
{
Id = 12,
Price = 34.14,
Company = "General Electric Company",
Date = new DateTime(2015, 06, 16),
Size = "extra large",
Visible = true
},
new
{
Id = 13,
Price = 30.27,
Company = "General Motors Corporation",
Date = new DateTime(2013, 12, 07),
Size = "medium",
Visible = true
},
new
{
Id = 14,
Price = 36.53,
Company = "Hewlett-Packard Co.",
Date = new DateTime(2014, 05, 13),
Size = "large",
Visible = true
},
new
{
Id = 15,
Price = 38.77,
Company = "Honweywell Intl Inc",
Date = new DateTime(2013, 11, 07),
Size = "medium",
Visible = false
},
new
{
Id = 16,
Price = 19.88,
Company = "Intel Corporation",
Date = new DateTime(2014, 01, 09),
Size = "small",
Visible = true
},
new
{
Id = 17,
Price = 81.41,
Company = "International Business Machines",
Date = new DateTime(2012, 01, 21),
Size = "extra large",
Visible = true
},
new
{
Id = 18,
Price = 64.72,
Company = "Johnson & Johnson",
Date = new DateTime(2015, 01, 10),
Size = "extra large",
Visible = true
},
new
{
Id = 19,
Price = 45.73,
Company = "JP Morgan & Chase & Co",
Date = new DateTime(2015, 02, 20),
Size = "large",
Visible = false
},
new
{
Id = 20,
Price = 36.76,
Company = "McDonald's Corporation",
Date = new DateTime(2014, 06, 12),
Size = "large",
Visible = true
},
new
{
Id = 21,
Price = 27.96,
Company = "Pfizer Inc",
Date = new DateTime(2014, 12, 30),
Size = "small",
Visible = false
},
new
{
Id = 22,
Price = 45.07,
Company = "The Coca-Cola Company",
Date = new DateTime(2014, 01, 30),
Size = "medium",
Visible = false
},
new
{
Id = 23,
Price = 34.64,
Company = "The Home Depot, Inc",
Date = new DateTime(2013, 12, 31),
Size = "small",
Visible = true
},
new
{
Id = 24,
Price = 61.91,
Company = "The Procter & Gamble Company",
Date = new DateTime(2014, 04, 08),
Size = "extra large",
Visible = true
},
new
{
Id = 25,
Price = 63.26,
Company = "United Technologies Corporation",
Date = new DateTime(2013, 06, 04),
Size = "medium",
Visible = true
},
new
{
Id = 26,
Price = 35.57,
Company = "Verizon Communications",
Date = new DateTime(2012, 07, 09),
Size = "small",
Visible = false
},
new
{
Id = 27,
Price = 45.45,
Company = "Wal-Mart Stores, Inc",
Date = new DateTime(2013, 09, 09),
Size = "large",
Visible = true
}
};
return goods;
}
}
}