[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:
Code:
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:
Code:
<%@ 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):
Code:
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;
}
}
}
Workaround used - before and after load
Hi @fabricio.murta,
None of the three removals were an option for the real project online.
I had to make a workaround/temporal fix.
I save the state of each filter before load click and then reapply it after.
It worked for StringFilter, BooleanFilter, DateFilter.
Works for any number of columns too.
NumberFilter was not needed for the real project, so i skipped it.
Although, it should be similar to DateFilter.
I added more comments, hope it helps someone.
Code:
var namesOfColumns = []; // stores dataIndex of each column on a grid
var filtersState; // stores all values, properties, operators and column indexes on every filter
Ext.enableAriaButtons = false;//i'm not sure if I need these two lines
Ext.enableAriaPanels = false;
function dynamicSort(property) { // sorts an array of object by its property (positive numericals only) - we need it to sort by column index in order to apply the correct values
var sortOrder = 1;
return function (a,b) {
var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
return result * sortOrder;
}
}
function CheckboxFilterFix() { // must execute AFTER load
if (typeof(filtersState) == 'undefined' || filtersState.length == 0) {
return;
}
var indexes = []; // finds all colIndexes that have filters
for (var i = 0; i < filtersState.length; i++) {
var index = namesOfColumns.indexOf(filtersState[i].property);
if (index > -1) { // if (there is a match)
indexes.push(index);
}
}
var orderedNamesOfColumns = []; // assigns colIndex to each and every filter
for (var i = 0; i < filtersState.length; i++) {
for (var j = 0; j < namesOfColumns.length; j++) {
if (filtersState[i].property == namesOfColumns[j]) {
filtersState[i].colIndex == j;
}
}
}
filtersState.sort(dynamicSort("colIndex")); //sorts objects by colIndex in order to apply the correct values
#{ GridPanelDevices }.store.clearFilter();
var filterNum = 0;
for (var i = 0; i < indexes.length; i++) { // sets all the values
if (#{ GridPanelDevices }.getFilterPlugin().getHeaders()[indexes[i]].filter.type != "date") { //anything other than date filter
#{ GridPanelDevices }.getFilterPlugin().getHeaders()[indexes[i]].filter.filter.setValue(filtersState[i].value);
} else { // date filter options // we might add other operators for numberFilter ?
if (filtersState[i].operator == "eq") {
#{ GridPanelDevices }.getFilterPlugin().getHeaders()[indexes[i]].filter.filter.eq.setValue(filtersState[i].value);
} else if (filtersState[i].operator == "lt") {
#{ GridPanelDevices }.getFilterPlugin().getHeaders()[indexes[i]].filter.filter.lt.setValue(filtersState[i].value);
} else if (filtersState[i].operator == "gt") {
#{ GridPanelDevices }.getFilterPlugin().getHeaders()[indexes[i]].filter.filter.gt.setValue(filtersState[i].value);
}
}
#{ GridPanelDevices }.getFilterPlugin().getHeaders()[indexes[i]].filter.setActive(false);//REapplies filter
#{ GridPanelDevices }.getFilterPlugin().getHeaders()[indexes[i]].filter.setActive(true);
}
}
function GetCheckboxFilterColumnIDs() { //must execute BEFORE load click
if (namesOfColumns.length == 0 && #{ GridPanelDevices }.getColumnManager().columns != null) { // sets namesOfColumns dataIndexes only once
for (var i = 0; i < #{ GridPanelDevices }.getColumnManager().columns.length; i++) {
namesOfColumns.push(#{ GridPanelDevices }.getColumnManager().columns[i].dataIndex);
}
}
filtersState = [];
var state = #{ GridPanelDevices }.getStore().getFilters(false);
var length = state.items.length;
for (i = 0; i < length; i++) { // gets all the data for each filter (tested with BOOLEAN, STRING, DATE)
var filter = state.items[i];
filterObj = {
'operator': filter.getOperator(), //used for date filter
'property': filter.getProperty(), //column dataIndex
'value': filter.getValue(),
'colIndex': 0 // column index, obtained and used to sort the objects in CheckboxFilterFix()
}
filtersState.push(filterObj);
}
}
