[CLOSED] Lose GridFilters after reconfigure Grid

  1. #1

    [CLOSED] Lose GridFilters after reconfigure Grid

    After reconfigure a grid i am lossing grid filters.

    Test case
    1. Check filter on string column (filter is ok)
    2. From combo select set 1 (
    3. Check filter on string column (filter miss)


     
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
      
    <script runat="server"> 
         
        private void AddField(RecordField field) 
        { 
            if (X.IsAjaxRequest) 
            { 
                this.Store1.AddField(field); 
            } 
            else 
            { 
                this.Store1.Reader.Reader.Fields.Add(field); 
            } 
        } 
          
        private void BindSet1() 
        { 
            string now = DateTime.Now.TimeOfDay.ToString(); 
            this.Store1.DataSource = new object[] 
                { 
                    new object[] {"Set1_1", 1, now, DateTime.Now}, 
                    new object[] {"Set1_2", 2, now, DateTime.Now}, 
                    new object[] {"Set1_3", 3, now, DateTime.Now} 
                }; 
            this.Store1.DataBind(); 
        } 
          
        private void BuildSet1() 
        { 
            if (X.IsAjaxRequest) 
            { 
                this.Store1.RemoveFields();
            } 
      
            this.AddField(new RecordField("StringField"));
            this.AddField(new RecordField("IntField1", RecordFieldType.Int)); 
            this.AddField(new RecordField("Timestamp"));
            this.AddField(new RecordField("Date", RecordFieldType.Date)); 
      
            this.BindSet1(); 
              
            this.GridPanel1.ColumnModel.Columns.Add(new Column{DataIndex = "StringField", Header = "String"}); 
            this.GridPanel1.ColumnModel.Columns.Add(new Column { DataIndex = "IntField", Header = "Int" }); 
            this.GridPanel1.ColumnModel.Columns.Add(new Column { DataIndex = "Timestamp", Header = "Timestamp" });
            Column column = new Column { DataIndex = "Date", Header = "Date" };
            column.Renderer.Format = RendererFormat.Date;
            string[] arg = new String[1];
            arg[0] = "'d/m/Y'";
            column.Renderer.FormatArgs = arg;
            
            this.GridPanel1.ColumnModel.Columns.Add(column);
            GridFilters gf = new GridFilters();
            GridPanel1.Plugins.Add(gf);
            StringFilter filter = new StringFilter();
            filter.DataIndex = "StringField";
            gf.Filters.Add(filter);
            
            if(X.IsAjaxRequest) 
            { 
                this.GridPanel1.Reconfigure(); 
            } 
        } 
      
        private void BindSet2() 
        { 
            string now = DateTime.Now.TimeOfDay.ToString(); 
            this.Store1.DataSource = new object[] 
                { 
                    new object[] {1, "Set2_1", 1, now}, 
                    new object[] {2, "Set2_2", 2, now}, 
                    new object[] {3, "Set2_3", 3, now}, 
                    new object[] {4, "Set2_4", 4, now}, 
                    new object[] {5, "Set2_5", 5, now}, 
                    new object[] {6, "Set2_6", 6, now} 
                }; 
            this.Store1.DataBind(); 
        } 
      
        private void BuildSet2() 
        { 
            if (X.IsAjaxRequest) 
            { 
                this.Store1.RemoveFields();
            } 
      
            this.AddField(new RecordField("IntField1", RecordFieldType.Int)); 
            this.AddField(new RecordField("StringField")); 
            this.AddField(new RecordField("IntField2", RecordFieldType.Int)); 
            this.AddField(new RecordField("Timestamp")); 
      
            this.BindSet2();
            this.GridPanel1.ColumnModel.Columns.Add(new CommandColumn { Commands = { new GridCommand { CommandName = "Cmd1", Icon = Icon.Add } } });
            this.GridPanel1.ColumnModel.Columns.Add(new ImageCommandColumn { Commands = { new ImageCommand { CommandName = "Cmd1", Icon = Icon.Add } } });         
            this.GridPanel1.ColumnModel.Columns.Add(new Column { DataIndex = "IntField1", Header = "Int1" }); 
            this.GridPanel1.ColumnModel.Columns.Add(new Column { DataIndex = "StringField", Header = "String" }); 
            this.GridPanel1.ColumnModel.Columns.Add(new Column { DataIndex = "IntField2", Header = "Int2" }); 
            this.GridPanel1.ColumnModel.Columns.Add(new Column { DataIndex = "Timestamp", Header = "Timestamp" }); 
      
            if (X.IsAjaxRequest) 
            { 
                this.GridPanel1.Reconfigure(); 
                this.GridPanel1.RegisterColumnPlugins(); 
            } 
        } 
      
        protected void RefreshDataSet(object sender, StoreRefreshDataEventArgs e) 
        { 
            if (DataSetSelector.SelectedItem != null && !string.IsNullOrEmpty(DataSetSelector.SelectedItem.Value)) 
            { 
                this.BindDataSet(null, null); 
            } 
        } 
      
        protected void BindDataSet(object sender, DirectEventArgs e) 
        { 
            switch (DataSetSelector.SelectedItem.Value) 
            { 
                case "1": 
                    this.BuildSet1(); 
                    break; 
                case "2": 
                    this.BuildSet2(); 
                    break;
            } 
        }
        protected void Page_Load(object sender, EventArgs e) 
        { 
            if (!X.IsAjaxRequest) 
            { 
                ResourceManager1.RegisterIcon(Icon.Add); 
                ResourceManager.RegisterControlResources<GridPanel>();
                BuildSet1();
            } 
        }
        private void RemoveFromCache(string id)
        {
            X.Js.Call("removeFromCache", id);
        }
        private void AddToCache(string id)
        {
            X.Js.Call("addToCache", id);
        }
        protected void BeforeExpand(object sender, DirectEventArgs e)
        {
            string id = e.ExtraParams["id"];
            Store store = new Store { ID = "StoreRow_" + id };
            JsonReader reader = new JsonReader();
            reader.IDProperty = "ID";
            reader.Fields.Add("ID", "Name");
            store.Reader.Add(reader);
            System.Collections.Generic.List<object> data = new System.Collections.Generic.List <object>();
            for (int i = 1; i <= 10; i++)
            {
                data.Add(new { ID = "P" + i, Name = "Product " + i });
            }
            store.DataSource = data;
            this.RemoveFromCache(store.ID);
            store.Render();
            this.AddToCache(store.ID);
            GridPanel grid = new GridPanel
            {
                ID = "GridPanelRow_" + id,
                StoreID = "{raw}StoreRow_" + id,
                AutoHeight = true,
                HideHeaders = true
            };
            grid.ColumnModel.Columns.Add(new Column
            {
                Header = "Products's Name",
                DataIndex = "Name"
            });
            grid.ColumnModel.ID = "GridPanelRowCM_" + id;
            grid.View.Add(new Ext.Net.GridView { ID = "GridPanelRowView_" + id, ForceFit = true });
            //important
            X.Get("row-" + id).SwallowEvent(new string[] { "click", "mousedown", "mouseup", "dblclick" }, true);
            this.RemoveFromCache(grid.ID);
            grid.Render("row-" + id, RenderMode.RenderTo);
            this.AddToCache(grid.ID);
        }
    
        
    </script> 
      
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head id="Head1" runat="server"> 
        <title></title> 
        
         <script type="text/javascript">
             window.lookup = [];
             var clean = function() {
                 if (window.lookup.length > 0) {
                     RowExpander1.collapseAll();
                     Ext.each(window.lookup, function(control) {
                         if (control) {
                             control.destroy();
                         }
                     });
                     window.lookup = [];
                 }
             };
             var removeFromCache = function(c) {
                 var c = window[c];
                 window.lookup.remove(c);
                 if (c) {
                     c.destroy();
                 }
             };
             var addToCache = function(c) {
                 window.lookup.push(window[c]);
             };
        
         </script>
        
    </head> 
    <body> 
        <form id="form1" runat="server"> 
            <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Gray" /> 
              
            <ext:Store ID="Store1" runat="server" OnRefreshData="RefreshDataSet" IgnoreExtraFields="false"> 
                <Reader> 
                    <ext:ArrayReader>                     
                    </ext:ArrayReader> 
                </Reader> 
            </ext:Store> 
              
            <ext:ComboBox ID="DataSetSelector" runat="server" Editable="false"> 
                <Items> 
                    <ext:ListItem Text="Set 1" Value="1" /> 
                    <ext:ListItem Text="Set 2" Value="2" /> 
                </Items> 
                  
                <DirectEvents> 
                    <Select OnEvent="BindDataSet" /> 
                </DirectEvents> 
            </ext:ComboBox> 
            
                <ext:GridPanel 
                    ID="GridPanel1" 
                    runat="server" 
                    StoreID="Store1" 
                    Title="Grid" 
                    Width="600" 
                    Height="350">      
                    
                    <SelectionModel> 
                        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server">
                            <Listeners>
                                <RowSelect Handler="alert(Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly : true})))" />
                            </Listeners>
                        </ext:RowSelectionModel> 
                    </SelectionModel>       
                    <ColumnModel></ColumnModel>
                    <Buttons>                 
                        <ext:Button ID="Button3" runat="server" Text="Refresh current set"> 
                            <Listeners> 
                                <Click Handler="#{GridPanel1}.store.reload();" /> 
                            </Listeners> 
                        </ext:Button> 
                    </Buttons>   
                     <View>
                        <ext:GridView ID="GridView1" runat="server" ForceFit="true">
                            <Listeners>
                                <BeforeRefresh Fn="clean" />
                            </Listeners>
                        </ext:GridView>
                    </View>       
                    <Plugins>
                       <ext:RowExpander ID="RowExpander1" runat="server" EnableCaching="true">
                        <Template ID="Template1" runat="server">
                            <Html>
           <div id="row-{IntField1}" style="background-color:White;"></div>
          </Html>
                        </Template>
                        <DirectEvents>
                            <BeforeExpand 
                                OnEvent="BeforeExpand" 
                                Before="return !body.rendered;" 
                                Success="body.rendered=true;">
                                <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={GridPanel1.body}" />
                                <ExtraParams>
                                    <ext:Parameter Name="id" Value="record.data.IntField1" Mode="Raw" />
                                </ExtraParams>
                            </BeforeExpand>
                        </DirectEvents>
                    </ext:RowExpander>
                    </Plugins>  
                </ext:GridPanel>    
                
        </form> 
    </body> 
    </html>
    Last edited by Daniil; Apr 09, 2011 at 12:56 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Unfortunatelly, the .Reconfigure() method doesn't reconfigure a GridFilter plugin.

    Really, I would suggest you to create the whole grid dynamically.

    If it's not an option you could try to reconfigure GridFilters manually on client side.
  3. #3
    According of you suggestion.

    - create the whole grid dynamically.
    In my real code, I have an empty grid, according of how the user want to view information on the grid, i re built whole grid. what do you mean with create the whole grid dynamically, i'm doing this.

    If it's not an option you could try to reconfigure GridFilters manually on client side.
    Do you have an example for this?

    Thanks
  4. #4
    Please look at the simplified example.

    Example
    <%@ Page Language="C#" %>
    
    <%@ 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 = new object[] 
                { 
                    new object[] { "test1" },
                    new object[] { "test2" },
                    new object[] { "test3" },
                };
                this.Store1.DataBind();
            }
        }
    
        protected void AddColumnAndBind(object sender, DirectEventArgs e)
        {
            RecordField f = new RecordField()
            {
                Name = "new"
            };
            this.Store1.AddField(f);
            
            
            Column c = new Column()
            {
                DataIndex = "new",
                Header = "New"
            };
            this.GridPanel1.AddColumn(c);
    
            this.Store1.DataSource = new object[] 
            { 
                new object[] { "test1", "new 1" },
                new object[] { "test2", "new 2" },
                new object[] { "test3", "new 3" },
            };
            this.Store1.DataBind();
    
            X.Js.Call("addFilter", new JRawValue(JSON.Serialize(new [] {"test", "new"})));
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    
        <script type="text/javascript">
            var addFilter = function (dataIndexes) {
                GridPanel1.filters.destroy();
                
                var filters = [];
                for (var i = 0; i < dataIndexes.length; i++) {
                    filters.push({
                        dataIndex: dataIndexes[i],
                        type : "string"   
                    });    
                }
                
                var newFilters = new Ext.ux.grid.GridFilters({
                    filters : filters
                });
                
                newFilters.init(GridPanel1);
            }
        </script>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test" DataIndex="test" />
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:GridFilters>
                    <Filters>
                        <ext:StringFilter DataIndex="test" />
                    </Filters>
                </ext:GridFilters>
            </Plugins>
        </ext:GridPanel>
        <ext:Button runat="server" Text="Add column" OnDirectClick="AddColumnAndBind" />
        </form>
    </body>
    </html>

Similar Threads

  1. Ext.net 2.0 RC2 + grid.reconfigure
    By Zdenek in forum 2.x Help
    Replies: 0
    Last Post: Jul 14, 2012, 2:36 PM
  2. [CLOSED] Hidden Change and Grid Filters are not working after Grid Reconfigure
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 15
    Last Post: Oct 16, 2011, 1:12 PM
  3. [CLOSED] Reconfigure Grid in Code Behind not working in v1.1
    By iansriley in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 04, 2011, 3:27 PM
  4. [CLOSED] [1.0] Issue w/ Store & Grid.reconfigure
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Nov 10, 2009, 1:36 PM
  5. [CLOSED] Problem with grid panel property Reconfigure?
    By Etisbew in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Oct 28, 2009, 10:45 AM

Tags for this Thread

Posting Permissions