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

Threaded View

Previous Post Previous Post   Next Post Next Post
  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

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