[OPEN] [#1693] Grid filter missing items when page bar is on

  1. #1

    [OPEN] [#1693] Grid filter missing items when page bar is on

    This can be reproduced by your example code below.

    1, Check a few items from the Company Name filter list, the grid is then filtered by selected items.
    2, click header of Price column, start sorting by price.
    3, Go back to the list filter on Company Name column, only filtered options are showing on the list. I am expecting it shows all options same as step 1 so I can continue to add items.

    Looks like this happens when the Page bar is added in. It works as expected if I remove the paging bar.
    Thanks
    -susan


    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.GridPanel1.Store.Primary.DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "3m Co", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "3m Co", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American' Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Locking Column Cell Editing - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
            
    
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            ColumnLines="true"
            Title="Locking Grid Column"
            Frame="true"
            MultiColumnSort="true"
            Width="800"
            Height="600">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
    
                            </Fields>
                        </ext:Model>
                    </Model>
                     
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
               
                    <ext:Column
                        runat="server" 
                        Text="Company Name"
                        DataIndex="company"
                        Width="200"
                        Locked ="true"
                        Sortable="true">
                        <Filter>
                                    <ext:ListFilter />
                                </Filter>
                       
                    </ext:Column>
    
                    <ext:Column runat="server" Text="Price" DataIndex="price" Width="97" Lockable="false">
                        <Renderer Format="UsMoney" />
                         <Filter>
                                    <ext:NumberFilter />
                                </Filter>
                    </ext:Column>
    
                    <ext:Column runat="server" Text="Change" DataIndex="change" Width="97">
                        <Renderer Fn="change" />
                        <Editor>
                            <ext:NumberField runat="server" />
                        </Editor>
                         <Filter>
                                    <ext:NumberFilter />
                                </Filter>
                    </ext:Column>
    
                    <ext:Column runat="server" Text="% Change" DataIndex="pctChange" Width="97">
                        <Renderer Fn="pctChange" />
                        <Editor>
                            <ext:NumberField runat="server" />
                        </Editor>
                         <Filter>
                                    <ext:NumberFilter />
                                </Filter>
                    </ext:Column>
    
                    <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" Width="97">
                        <Editor>
                            <ext:DateField runat="server" />
                        </Editor>
                         <Filter>
                                    <ext:DateFilter />
                                </Filter>
                    </ext:DateColumn>
         
                    <ext:Column runat="server" Text="Price" DataIndex="price" Width="97" Lockable="false">
                        <Renderer Format="UsMoney" />
                        <Editor>
                            <ext:NumberField runat="server" />
                        </Editor>
                         <Filter>
                                    <ext:ListFilter />
                                </Filter>
                    </ext:Column>
                   
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:SpreadsheetSelectionModel runat="server" RowSelect ="true" />
            </SelectionModel>
            <BottomBar>
                <ext:PagingToolbar runat="server" />
            </BottomBar>
            <View>
                    <ext:GridView runat="server">
                    </ext:GridView>
            </View>
           
            <Features>
               <ext:GroupingSummary ID="Grouping1" runat="server"
                        HideGroupedHeader="false"
                        StartCollapsed="true"
                        GroupHeaderTplString='{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})' 
               />
    
              <ext:Summary runat ="server" ShowSummaryRow="true" />
            </Features>
             <Buttons>
                    <ext:Button
                        ID="btnToggleGroups"
                        runat="server"
                        Text="Expand/Collapse Groups"
                        Icon="TableSort"
                        Style="margin-left: 6px;">
                       
                    </ext:Button>
                
            <Plugins>
                <ext:CellEditing runat="server" ClicksToEdit="1" />
                <ext:FilterHeader runat="server"  />
                <ext:GridFilters runat ="server" />
            </Plugins>
        </ext:GridPanel>
    </body>
    </html>
    Last edited by fabricio.murta; Feb 11, 2020 at 7:38 PM. Reason: fix code closing block
  2. #2
    Hello Susan!

    Your test case seems weird. I believe an error happened when you copypasted it from your project. Could you review it? There are things out of place, like closing script tags without opening, a buttons tag without closing... And maybe other issues.

    Looking forward to your follow-up!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Sorry, I was trying to takeout some unrelated code. Here is the working one:
    
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.GridPanel1.Store.Primary.DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "American' Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Locking Column Cell Editing - Ext.NET Examples</title>
     
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            ColumnLines="true"
            Title="Locking Grid Column"
            Frame="true"
            MultiColumnSort="true"
            Width="800"
            Height="600">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column
                        runat="server" 
                        Text="Company Name"
                        DataIndex="company"
                        Width="200"
                        Locked ="true"
                        Sortable="true">
                        <Filter>
                             <ext:ListFilter />
                        </Filter>
                    </ext:Column>
    
                    <ext:Column runat="server" Text="Price" DataIndex="price" Width="97" Lockable="false">
                      <Filter>
                             <ext:NumberFilter />
                      </Filter>
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:SpreadsheetSelectionModel runat="server" RowSelect ="true" />
            </SelectionModel>
            <BottomBar>
                <ext:PagingToolbar runat="server" />
            </BottomBar>
            <View>
                    <ext:GridView runat="server">
                    </ext:GridView>
            </View>
            <Plugins>
                <ext:FilterHeader runat="server"  />
                <ext:GridFilters runat ="server" />
            </Plugins>
        </ext:GridPanel>
    </body>
    </html>
    Last edited by susanz; Feb 12, 2020 at 7:17 PM.
  4. #4
    Hello Susan,

    There's still something strange with your code, somehow you repeated the same mistake in the first post where the code block is not closed, I'm reluctant to fix it again. Would you mind taking another look at your post?

    I'd also suggest the cleanup to happen in Visual Studio, where you draw the test case, to avoid whatever happened the initial post; your efforts to clean up a test sample are highly appreciated on your end and, ultimately, only help us properly and timely help you back. You may also want to just edit the initial post and fix the test case there to keep things simple.

    You can edit your posts by clicking the little Edit post link in the bottom right corner of any post made from you in the forums.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hi Fabricio,

    Updated. Removed more unrelated codes. I don't see any unclosed blocks from my editor.
    Please try.
    Thanks -sz
    Click image for larger version. 

Name:	gridfilter.png 
Views:	3 
Size:	30.9 KB 
ID:	25308
    Last edited by susanz; Feb 12, 2020 at 9:12 PM.
  6. #6
    Wow, good job! It looks really nice now!

    I'm really sorry for that, it was too much coincidence the exact same issue throughout the threads. I'm looking up the issue right now, and will come back to you in a moment!
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Hello Susan!

    Can you test this override to see if it works? It seems Sencha left a little mistake in their code that I addressed here.

    Ext.define('gh1693', {
        override: 'Ext.grid.filters.filter.List',
        getOptionsFromStore: function (store) {
            var me = this,
                data = store.getData(),
    
                map = {},
                ret = [],
                dataIndex = me.dataIndex,
                labelIndex = me.labelIndex,
                recData, idValue, labelValue;
            if (store.isFiltered() && !store.remoteFilter) {
                data = data.getSource();
            }
    
            data.each(function (record) {
                recData = record.data;
                idValue = recData[dataIndex];
                labelValue = recData[labelIndex];
                if (labelValue === undefined) {
                    labelValue = idValue;
                }
    
                if (!map[idValue]) {
                    map[idValue] = 1;
                    ret.push([
                        idValue,
                        labelValue
                    ]);
                }
            }, null, {
                filtered: true,
    
                collapsed: true
            });
    
            return ret;
        }
    });
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Awesome, that works!
    Thanks, Fabricio!
    -susan

Similar Threads

  1. Replies: 2
    Last Post: Feb 11, 2019, 6:35 AM
  2. Replies: 1
    Last Post: Feb 08, 2016, 10:14 PM
  3. Replies: 2
    Last Post: Oct 28, 2011, 6:44 AM
  4. [CLOSED] Missing filter column using MultiHeader Filter.
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 12, 2010, 1:07 PM
  5. Replies: 1
    Last Post: Oct 09, 2009, 3:46 AM

Posting Permissions