[OPEN] [#1669] DateFilter on GridFilters - load of store resets value and deselects filter checkboxes

  1. #1

    [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:
    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;
            }
        }
    }
  2. #2
    Hello @Phoenix, and welcome to Ext.NET forums!

    It seems you found a bug! Unfortunately, we don't have a fix for this you could use for the time being, other than avoiding the scenario, which is either:
    - remove the paging toolbar (and functionality) from the grid
    - do not reload the grid
    - clear filters before reloading the grid (full refresh)

    When using the paging toolbar some types of filters (not just the date, but also the number) are losing the value field; we still have to investigate the cause of this.

    We logged the issue under #1669 in github and will post a follow-up here as soon as we get it fixed and slated for the next public Ext.NET release.

    Thanks for taking your time to report the issue and providing a runnable test case, it was an awesome first post! Hope one of the alternatives above is feasible for the time being.
    Fabrício Murta
    Developer & Support Expert
  3. #3

    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.

                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);
                    }
                }
  4. #4
    Hello @phoenix!

    I was planning to write about the aria bit in your message but in the end I forgot about it.

    [quote=Phoenix]Setting Ext.enableAriaButtons = false; Ext.enableAriaPanels = false;
    in JS did not change anything.[/quote

    In general, settings containing aria in their names are related to accessibility features from Ext JS, and some warnings are printed out while scripts are in debug mode to aid addressing accessibility potential issues. If you are not submitting your application to screen readers, or want the application "tab-friendly" (but focus on mouse or touch driven interface), then these warnings are not useful for you. Overall, aria settings should not change the actual behavior of components, but just adapt their "accessible" behavior for an application's need.

    So, a as far as I understand in your case, the aria warnings are not related to the issue in question.

    On another topic, glad you found an alternative that works for you, and thanks for sharing, we really appreciate it!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Change datepicker of Datefilter in GridFilters
    By gnostic in forum 4.x Help
    Replies: 3
    Last Post: Aug 06, 2017, 2:50 AM
  2. Replies: 8
    Last Post: Aug 27, 2013, 4:55 AM
  3. [CLOSED] Load store using parameter to filter data
    By jpadgett in forum 2.x Premium Help
    Replies: 5
    Last Post: Mar 01, 2013, 1:17 PM
  4. GridPanel Filter example DateFilter doesn't work
    By jwhitmire36 in forum 2.x Help
    Replies: 2
    Last Post: Jan 09, 2013, 9:24 PM
  5. [CLOSED] [1.0] MultiCombo resets store on load
    By danielg in forum 1.x Premium Help
    Replies: 3
    Last Post: Aug 06, 2010, 7:48 AM

Tags for this Thread

Posting Permissions