[CLOSED] ListFilter Update items

  1. #1

    [CLOSED] ListFilter Update items

    Below is an example of a ListFilter populated via a store. There are two buttons that will attempt to reload the store with 3 items (full) or 2 items (partial). After reloading the store how do I tell the filter to refresh?

    Follow these steps:
    1. Launch example
    2. Look at the ListFilter for Category, it should have 2 items.
    3. Press the "Update (Full)" button
    4. Look at the ListFilter again , it might have 3 items but most likely it still shows 2.
    5. Drag the Category column to the first column.
    6. Look at the ListFilter again and it will have 3 items.


    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.GridStore.DataSource = new object[]
                {
                    new object[] { 1, "Baseline", "Training Guide"},
                    new object[] { 2, "Reference", "How to ..."},
                    new object[] { 3, "Archive", "Training Guide (1983)"},
                };
                this.GridStore.DataBind();
                BuildCategoryStore(false);
    
            }
        }
    
        protected void UpdateFull(object sender, DirectEventArgs e)
        {
            BuildCategoryStore(true);
        }
    
        protected void UpdatePartial(object sender, DirectEventArgs e)
        {
            BuildCategoryStore(false);
        }
        
        private void BuildCategoryStore(Boolean full)
        {
    
            List<object> data = new List<object> 
                { 
                    new { Cat = "Baseline",  IsActive = true,   CatCombined = "Baseline"           },
                    new { Cat = "Reference", IsActive = true,   CatCombined = "Reference"          },
                };
    
            if (full)
            {
                object storeData = new { Cat = "Archive", IsActive = false, CatCombined = "Archive <font color=red><i>(Inactive)</i></font>" };
                data.Add(storeData);
            }
                
            this.CategoryStore.DataSource = data;
            this.CategoryStore.DataBind();
    
        }
    </script>
    <head runat="server">
        <title>ListFiler Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel runat="server">
            <Bin>
                <ext:Store ID="CategoryStore" runat="server">
                    <Model>
                        <ext:Model runat="server" IDProperty="Cat">
                            <Fields>
                                <ext:ModelField Name="id" Mapping="Cat" Type="String" />
                                <ext:ModelField Name="IsActive" Type="Boolean" />
                                <ext:ModelField Name="CatCombined" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Bin>
            <Store>
                <ext:Store ID="GridStore" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="Id" />
                                <ext:ModelField Name="Category" Type="String" />
                                <ext:ModelField Name="Title" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Id" DataIndex="Id" Width="50" />
                    <ext:Column runat="server" Text="Category" DataIndex="Category" Width="120" />
                    <ext:Column runat="server" Text="Title" DataIndex="Title" Flex="1" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" Mode="Single" />
            </SelectionModel>
            <Features>
                <ext:GridFilters ID="GridFilters" runat="server" Local="true">
                    <Filters>
                        <ext:ListFilter DataIndex="Category" StoreID="CategoryStore" LabelField="CatCombined"
                            IDField="id" />
                    </Filters>
                </ext:GridFilters>
            </Features>
        </ext:GridPanel>
        <ext:Button runat="server" Text="Update (Full)" OnDirectClick="UpdateFull" />
        <ext:Button runat="server" Text="Update (Partial)" OnDirectClick="UpdatePartial" />
    </body>
    </html>
    Last edited by Daniil; Nov 17, 2014 at 1:35 PM. Reason: [CLOSED]
  2. #2
    After reading some additional threads I came up with this example:

    Update GridFilters ListFilter Store Server-Side and 2.3.0 Ext.NET - (Dynamic) GridPanel and Filter

    The buttons "Store Full | Filter Client" and "Store Partial | Filter Client" work great. They repopulate the store on the server side either with all or partial records. The filter is recreated on the client side.

    The buttons "Store Full | Filter Server" and "Store Partial | Filter Server" also work, but they are not directly creating the filter on the server side. It is calling javascript directly. Is this the only or best way?

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.GridStore.DataSource = new object[]
                {
                    new object[] { 1, "Baseline", "Training Guide"},
                    new object[] { 2, "Reference", "How to ..."},
                    new object[] { 3, "Archive", "Training Guide (1983)"},
                };
                this.GridStore.DataBind();
                BuildCategoryStore(false);
            }
        }
    
        protected void UpdateStoreAndFilter(object sender, DirectEventArgs e)
        {
            BuildCategoryStore(Convert.ToBoolean(e.ExtraParams["AllData"]));
            if (Convert.ToBoolean(e.ExtraParams["FilterServer"]))
                RebuildFilter();
        }
    
        private void BuildCategoryStore(Boolean full)
        {
            List<object> data = new List<object> 
                { 
                    new { Cat = "Baseline",  IsActive = true,   CatCombined = "Baseline"           },
                    new { Cat = "Reference", IsActive = true,   CatCombined = "Reference"          },
                };
    
            if (full)
            {
                object storeData = new { Cat = "Archive", IsActive = false, CatCombined = "Archive <font color=red><i>(Inactive)</i></font>" };
                data.Add(storeData);
            }
    
            this.CategoryStore.DataSource = data;
            this.CategoryStore.DataBind();
        }
    
        private void RebuildFilter()
        {
            //Is this the best approach?
            X.Js.AddScript("rebuildFilter();");
        }
    </script>
    <head runat="server">
        <title>ListFiler Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel" runat="server" ClientIDMode="Static">
            <Bin>
                <ext:Store ID="CategoryStore" runat="server" ClientIDMode="Static">
                    <Model>
                        <ext:Model runat="server" IDProperty="Cat">
                            <Fields>
                                <ext:ModelField Name="id" Mapping="Cat" Type="String" />
                                <ext:ModelField Name="IsActive" Type="Boolean" />
                                <ext:ModelField Name="CatCombined" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Bin>
            <Store>
                <ext:Store ID="GridStore" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="Id" />
                                <ext:ModelField Name="Category" Type="String" />
                                <ext:ModelField Name="Title" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Id" DataIndex="Id" Width="50" />
                    <ext:Column runat="server" Text="Category" DataIndex="Category" Width="120" />
                    <ext:Column runat="server" Text="Title" DataIndex="Title" Flex="1" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" Mode="Single" />
            </SelectionModel>
            <Features>
                <ext:GridFilters ID="GridFilters" runat="server" ClientIDMode="Static" Local="true">
                    <Filters>
                        <ext:ListFilter DataIndex="Category" StoreID="CategoryStore" LabelField="CatCombined"
                            IDField="id" />
                    </Filters>
                </ext:GridFilters>
            </Features>
            <HtmlBin>
                <script type="text/javascript">
                    function rebuildFilter() {
                        App.GridFilters.filters.items[0].menu =
                        App.GridFilters.filters.items[0].createMenu({
                            dataIndex: 'Category',
                            grid: App.GridPanel,
                            idField: 'id',
                            labelField: 'CatCombined',
                            store: App.CategoryStore,
                            type: 'list'
                        });
                    }
                </script>
            </HtmlBin>
        </ext:GridPanel>
        <ext:ButtonGroup runat="server" Layout="HBoxLayout" >
            <Items>
                <ext:Button runat="server" Text="Store Full | Filter Client">
                    <DirectEvents>
                        <Click OnEvent="UpdateStoreAndFilter" Success="rebuildFilter();">
                            <ExtraParams>
                                <ext:Parameter Name="AllData" Value="true" Mode="Value" />
                                <ext:Parameter Name="FilterServer" Value="false" Mode="Value" />
                            </ExtraParams>
                        </Click>
                    </DirectEvents>
                </ext:Button>
                <ext:Button runat="server" Text="Store Partial | Filter Client" Border="true">
                    <DirectEvents>
                        <Click OnEvent="UpdateStoreAndFilter" Success="rebuildFilter();">
                            <ExtraParams>
                                <ext:Parameter Name="AllData" Value="false" Mode="Value" />
                                <ext:Parameter Name="FilterServer" Value="false" Mode="Value" />
                            </ExtraParams>
                        </Click>
                    </DirectEvents>
                </ext:Button>
                <ext:ToolbarSeparator runat="server" />
                <ext:Button runat="server" Text="Store Full | Filter Server?">
                    <DirectEvents>
                        <Click OnEvent="UpdateStoreAndFilter">
                            <ExtraParams>
                                <ext:Parameter Name="AllData" Value="true" Mode="Value" />
                                <ext:Parameter Name="FilterServer" Value="true" Mode="Value" />
                            </ExtraParams>
                        </Click>
                    </DirectEvents>
                </ext:Button>
                <ext:Button runat="server" Text="Store Partial | Filter Server?">
                    <DirectEvents>
                        <Click OnEvent="UpdateStoreAndFilter">
                            <ExtraParams>
                                <ext:Parameter Name="AllData" Value="false" Mode="Value" />
                                <ext:Parameter Name="FilterServer" Value="true" Mode="Value" />
                            </ExtraParams>
                        </Click>
                    </DirectEvents>
                </ext:Button>
            </Items>
        </ext:ButtonGroup>
    </body>
    </html>
    Last edited by cwolcott; Nov 16, 2014 at 11:30 PM.
  3. #3
    I guess I finally answered my own question this weekend. I think the best solution is to add a listener to the CategoryStore:

    <Listeners>
       <Load Fn="rebuildFilter" />
    <Listeners>
    Thus this will always rebuild the ListFilter associated with the Category whenever the store is loaded. No need to recreate on the server side since the filter is associated with the store, let the store control what and when it happens.

    Please close the thread.
    Last edited by cwolcott; Nov 17, 2014 at 1:25 PM.

Similar Threads

  1. [CLOSED] Update 2.4 - 2.5 / listFilter trouble with Stores
    By tMp in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 24, 2014, 4:08 AM
  2. [CLOSED] Update GridFilters ListFilter Store Server-Side
    By jwhitmire36 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 23, 2013, 2:44 PM
  3. MenuPanel update items from javascript
    By Paul D in forum 1.x Help
    Replies: 2
    Last Post: Sep 23, 2010, 2:12 PM
  4. Replies: 8
    Last Post: Jun 24, 2010, 10:07 AM
  5. [CLOSED] Rowexpander Component Items update from Code-Behind
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Feb 20, 2010, 3:09 AM

Posting Permissions