Grid Date Filter does not work after Grid reload (Ext.net 5.2)

  1. #1

    Grid Date Filter does not work after Grid reload (Ext.net 5.2)

    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
    Attached Thumbnails Click image for larger version. 

Name:	Step-1-2-Filter-then-reload.jpg 
Views:	63 
Size:	100.0 KB 
ID:	25435   Click image for larger version. 

Name:	Step-3-Result-After-Refresh.JPG 
Views:	56 
Size:	60.6 KB 
ID:	25436   Click image for larger version. 

Name:	Date-Column.JPG 
Views:	60 
Size:	35.1 KB 
ID:	25437   Click image for larger version. 

Name:	Store-Def-for-date-column.JPG 
Views:	53 
Size:	80.1 KB 
ID:	25438   Click image for larger version. 

Name:	Gridfilter.JPG 
Views:	67 
Size:	18.4 KB 
ID:	25439  

  2. #2
    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. 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.

    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.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    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

    Hope you don't mind following the other thread.
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Hello,

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

    breg
  5. #5
    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, where we discuss this is a known issue?
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Can I save and after that Reload the filters state in Ext.NET Grid view
    By Nhím Hổ Báo in forum 1.x Help
    Replies: 14
    Last Post: Mar 26, 2015, 10:22 AM
  2. Prevent grid reload on filter update/activate event
    By alexanderius in forum 2.x Help
    Replies: 3
    Last Post: Jun 09, 2014, 11:46 AM
  3. Replies: 0
    Last Post: May 22, 2014, 12:06 PM
  4. How Reload the Ext,net Grid and Numeric Page Editor
    By iansriley in forum Examples and Extras
    Replies: 1
    Last Post: Jan 11, 2013, 2:01 AM
  5. [CLOSED] Date Grid Filter Issue
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 02, 2011, 9:09 AM

Posting Permissions