[CLOSED] ListFilter with DataStore

  1. #1

    [CLOSED] ListFilter with DataStore

    Hi,
    if I load the data of listfilter from a datastore, the filter doesn't work,
    see my example.
    Thank you

    Jimmy

    <%@ Page Language="C#" %>
    
    
    <%@ Import Namespace="System.Collections.ObjectModel" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = Data();
                this.Store1.DataBind();
                this.Store2.DataSource = Size();
                this.Store2.DataBind();
              
            }
        }
        
        protected void SetFilter(object sender, DirectEventArgs e)
        {
            StringFilter sf = (StringFilter)GridFilters1.Filters[1];
            sf.SetValue("3m Co");
            sf.SetActive(true);
        }
    
    
        protected List<object> Size()
        {
    
    
          List<object> sizes = new List<object>
          {
              new { Size = "extra small" },
              new { Size = "small" },
              new { Size = "medium" },
              new { Size = "large" },
              new { Size = "extra large" }
          };
          
          return sizes;
          
        }
    
    
        protected List<object> Data()
        {
          List<object> goods = new List<object>
                                {
                                    new
                                        {
                                            Id = 1,
                                            Price = 71.72,
                                            Company = "3m Co",
                                            Date = new DateTime(2007, 9, 1),
                                            Size = "large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 2,
                                            Price = 29.01,
                                            Company = "Aloca Inc",
                                            Date = new DateTime(2007, 08, 01),
                                            Size = "medium",
                                            Visible = false
                                        },
                                    new
                                        {
                                            Id = 3,
                                            Price = 83.81,
                                            Company = "Altria Group Inc",
                                            Date = new DateTime(2007, 08, 03),
                                            Size = "large",
                                            Visible = false
                                        },
                                    new
                                        {
                                            Id = 4,
                                            Price = 52.55,
                                            Company = "American Express Company",
                                            Date = new DateTime(2008, 01, 04),
                                            Size = "extra large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 5,
                                            Price = 64.13,
                                            Company = "American International Group Inc.",
                                            Date = new DateTime(2008, 03, 04),
                                            Size = "small",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 6,
                                            Price = 31.61,
                                            Company = "AT&T Inc.",
                                            Date = new DateTime(2008, 02, 01),
                                            Size = "extra large",
                                            Visible = false
                                        },
                                    new
                                        {
                                            Id = 7,
                                            Price = 75.43,
                                            Company = "Boeing Co.",
                                            Date = new DateTime(2008, 01, 01),
                                            Size = "large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 8,
                                            Price = 67.27,
                                            Company = "Caterpillar Inc.",
                                            Date = new DateTime(2007, 12, 03),
                                            Size = "medium",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 9,
                                            Price = 49.37,
                                            Company = "Citigroup, Inc.",
                                            Date = new DateTime(2007, 11, 24),
                                            Size = "large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 10,
                                            Price = 40.48,
                                            Company = "E.I. du Pont de Nemours and Company",
                                            Date = new DateTime(2007, 05, 09),
                                            Size = "extra large",
                                            Visible = false
                                        },
                                    new
                                        {
                                            Id = 11,
                                            Price = 68.1,
                                            Company = "Exxon Mobile Corp",
                                            Date = new DateTime(2007, 12, 12),
                                            Size = "large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 12,
                                            Price = 34.14,
                                            Company = "General Electric Company",
                                            Date = new DateTime(2008, 06, 16),
                                            Size = "extra large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 13,
                                            Price = 30.27,
                                            Company = "General Motors Corporation",
                                            Date = new DateTime(2006, 12, 07),
                                            Size = "medium",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 14,
                                            Price = 36.53,
                                            Company = "Hewlett-Packard Co.",
                                            Date = new DateTime(2007, 05, 13),
                                            Size = "large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 15,
                                            Price = 38.77,
                                            Company = "Honweywell Intl Inc",
                                            Date = new DateTime(2006, 11, 07),
                                            Size = "medium",
                                            Visible = false
                                        },
                                    new
                                        {
                                            Id = 16,
                                            Price = 19.88,
                                            Company = "Intel Corporation",
                                            Date = new DateTime(2007, 01, 09),
                                            Size = "small",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 17,
                                            Price = 81.41,
                                            Company = "International Business Machines",
                                            Date = new DateTime(2005, 01, 21),
                                            Size = "extra large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 18,
                                            Price = 64.72,
                                            Company = "Johnson & Johnson",
                                            Date = new DateTime(2008, 01, 10),
                                            Size = "extra large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 19,
                                            Price = 45.73,
                                            Company = "JP Morgan & Chase & Co",
                                            Date = new DateTime(2008, 02, 20),
                                            Size = "large",
                                            Visible = false
                                        },
                                    new
                                        {
                                            Id = 20,
                                            Price = 36.76,
                                            Company = "McDonald's Corporation",
                                            Date = new DateTime(2007, 06, 12),
                                            Size = "large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 21,
                                            Price = 27.96,
                                            Company = "Pfizer Inc",
                                            Date = new DateTime(2007, 12, 30),
                                            Size = "small",
                                            Visible = false
                                        },
                                    new
                                        {
                                            Id = 22,
                                            Price = 45.07,
                                            Company = "The Coca-Cola Company",
                                            Date = new DateTime(2007, 01, 30),
                                            Size = "medium",
                                            Visible = false
                                        },
                                    new
                                        {
                                            Id = 23,
                                            Price = 34.64,
                                            Company = "The Home Depot, Inc",
                                            Date = new DateTime(2006, 12, 31),
                                            Size = "small",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 24,
                                            Price = 61.91,
                                            Company = "The Procter & Gamble Company",
                                            Date = new DateTime(2007, 04, 08),
                                            Size = "extra large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 25,
                                            Price = 63.26,
                                            Company = "United Technologies Corporation",
                                            Date = new DateTime(2006, 06, 04),
                                            Size = "medium",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 26,
                                            Price = 35.57,
                                            Company = "Verizon Communications",
                                            Date = new DateTime(2005, 07, 09),
                                            Size = "small",
                                            Visible = false
                                        },
                                    new
                                        {
                                            Id = 27,
                                            Price = 45.45,
                                            Company = "Wal-Mart Stores, Inc",
                                            Date = new DateTime(2006, 09, 09),
                                            Size = "large",
                                            Visible = true
                                        }
                                };
    
    
            return goods;
          
        }
    </script>
    
    
    <!DOCTYPE html>
        
    <html>
    <head id="Head1" runat="server">
        <title>GridPanel with Local Filtering, Sorting and Paging - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" DirectEventUrl="default.aspx" />
        
        <h1>GridPanel with Local Filtering, Sorting and Paging</h1>
        
        <p>Please see column header menu for apllying filters</p>
        
        <ext:Store runat="server" ID="Store1" PageSize="10">
            <Model>
                <ext:Model ID="Model1" 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" DateFormat="yyyy-MM-ddTHH:mm:ss" />
                        <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>
    
    
        <ext:Store runat="server" ID="Store2" PageSize="10">
            <Model>
              <ext:Model ID="Model2" runat="server" IDProperty="Id">
                <Fields>
                  <ext:ModelField Name="Size" Type="String" />
                </Fields>
              </ext:Model>
            </Model>
        </ext:Store>
        
        <ext:Window 
            ID="Window1" 
            runat="server"         
            Width="700" 
            Height="400" 
            Closable="false"
            Collapsible="true"
            Title="Example" 
            Maximizable="true"
            Layout="Fit">
            <Items>
                <ext:GridPanel ID="GridPanel1" runat="server" Border="false" StoreID="Store1">
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column ID="Column1" runat="server" Text="ID" DataIndex="Id" />
                            <ext:Column ID="Column2" runat="server" Text="Company" DataIndex="Company" />
                            <ext:Column ID="Column3" runat="server" Text="Price" DataIndex="Price">
                                <Renderer Format="UsMoney" />
                            </ext:Column>
                            <ext:DateColumn ID="DateColumn1" runat="server" Text="Date" DataIndex="Date" Align="Center" Format="yyyy-MM-dd" />
                            <ext:Column ID="Column4" runat="server" Text="Size" DataIndex="Size" />
                            <ext:Column ID="Column5" runat="server" Text="Visible" DataIndex="Visible" Align="Center">
                                <Renderer Handler="return (value) ? 'Yes':'No';" />
                            </ext:Column>
                        </Columns>
                    </ColumnModel>
                    <Features>
                        <ext:GridFilters runat="server" ID="GridFilters1" Local="true">
                            <Filters>
                                <ext:NumericFilter DataIndex="Id" />
                                <ext:StringFilter DataIndex="Company" />
                                <ext:NumericFilter DataIndex="Price" />
                                <ext:DateFilter DataIndex="Date">
                                    <DatePickerOptions runat="server" TodayText="Now" />
                                </ext:DateFilter>
                                <ext:ListFilter DataIndex="Size" StoreID="Store2" LabelField="Size" />
                                <ext:BooleanFilter DataIndex="Visible" />
                            </Filters>
                        </ext:GridFilters>
                    </Features>
                    <BottomBar>
                        <ext:PagingToolbar ID="PagingToolbar1" runat="server" HideRefresh="True">
                            <Items>
                                <ext:Button ID="Button1" runat="server" Text="Find '3m Co'">
                                    <DirectEvents>
                                        <Click OnEvent="SetFilter" />
                                    </DirectEvents>
                                </ext:Button>
                                <ext:Button ID="Button2" runat="server" Text="All Filters" ToolTip="Get Filters of Grid" Handler="var filters = Ext.encode(this.up('grid').filters.getFilterData()); Ext.Msg.alert('Filters', filters);" />
                                <ext:Button ID="Button3" runat="server" Text="Clear Filters" Handler="this.up('grid').filters.clearFilters();" />
                            </Items>
                        </ext:PagingToolbar>
                    </BottomBar>                   
                </ext:GridPanel>
            </Items>
        </ext:Window>
    </body>
    </html>
    Last edited by Baidaly; Dec 10, 2013 at 8:24 PM. Reason: [CLOSED]
  2. #2
    Hi Jimmy,

    Please set up
    IDField="Size"
    for the ListFilter.

    It is used as values to filter. By default, it is "id".

    Also you can remove IDProperty="Id" of the Model2 since you don't bind such data to the Store.
  3. #3
    Hi Daniil,
    it works fine.
    Thank you very much.

Similar Threads

  1. Replies: 5
    Last Post: May 28, 2013, 7:20 PM
  2. [CLOSED] DataStore javascript error
    By sadaf in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Nov 25, 2010, 11:06 AM
  3. [1.0] DataStore Record Field Bug
    By protactinium in forum 1.x Help
    Replies: 1
    Last Post: May 17, 2010, 7:07 PM
  4. [CLOSED] ID for new DataStore Record
    By Steve in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: May 14, 2009, 1:57 PM
  5. [CLOSED] Loading JSON to datastore
    By UGRev in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 21, 2009, 4:56 PM

Posting Permissions