[CLOSED] Hidden Change and Grid Filters are not working after Grid Reconfigure

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Hidden Change and Grid Filters are not working after Grid Reconfigure

    Hi:


    I have a page with Grid and a button to Reconfigure the grid, after the page gets loaded, I click on "Reconfigure Store" button.

    1. Now I proceed to hide a column, I get Coolite Error and the HiddenChange event is not getting fired.
    2. The Grid Filters are not getting displayed.

    here is my Code. kindly help me out of this 2 issue.

    
    <%@ Page Language="C#" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                InitializeControls();
            }
        }
        private System.Collections.Generic.List<UserDetail> Data()
        {
            System.Collections.Generic.List<UserDetail> lstUsers = new System.Collections.Generic.List<UserDetail>();
            lstUsers.Add(new UserDetail("3m Co", "Address 1", "12345678"));
            lstUsers.Add(new UserDetail("2m Co", "Address 2", "12345672"));
            lstUsers.Add(new UserDetail("1m Co", "Address 3", "12345671"));
            lstUsers.Add(new UserDetail("5m Co", "Address 4", "12345675"));
            return lstUsers;
        }
    
        protected void ColumnHiddenChange(object sender, DirectEventArgs e)
        {
            string strColumnName = e.ExtraParams["columnName"].ToString();
        }
        [DirectMethod]
        public void ReConfigureStore()
        {
            InitializeControls();
            grdTest.Reconfigure();
        }
        private void InitializeControls()
        {
            JsonReader jReader = new JsonReader();
            RecordField rfUserName = new RecordField();
            rfUserName.Name = "UserName";
            jReader.Fields.Add(rfUserName);
            RecordField rfUserAddress = new RecordField();
            rfUserAddress.Name = "UserAddress";
            jReader.Fields.Add(rfUserAddress);
            RecordField rfUserPhone = new RecordField();
            rfUserPhone.Name = "UserPhone";
            jReader.Fields.Add(rfUserPhone);
            stTest.Reader.Add(jReader);
            Column objColumn = new Column();
            objColumn.DataIndex = "UserName";
            objColumn.Header = "Name";
            grdTest.ColumnModel.Columns.Add(objColumn);
            objColumn = new Column();
            objColumn.DataIndex = "UserAddress";
            objColumn.Header = "Address";
            grdTest.ColumnModel.Columns.Add(objColumn);
            objColumn = new Column();
            objColumn.DataIndex = "UserPhone";
            objColumn.Header = "Phone";
            grdTest.ColumnModel.Columns.Add(objColumn);
            StringFilter sFilter = new StringFilter();
            sFilter.DataIndex = "UserName";
            grdTestFilters.Filters.Add(sFilter);
            sFilter = new StringFilter();
            sFilter.DataIndex = "UserAddress";
            grdTestFilters.Filters.Add(sFilter);
            sFilter = new StringFilter();
            sFilter.DataIndex = "UserPhone";
            grdTestFilters.Filters.Add(sFilter);
            this.stTest.DataSource = this.Data();
            this.stTest.DataBind();
        }
        public class UserDetail
        {
            private string _strUserName = string.Empty;
            private string _strUserAddress = string.Empty;
            private string _strUserPhone = string.Empty;
            public string UserName { get { return _strUserName; } set { this._strUserName = value; } }
            public string UserAddress { get { return _strUserAddress; } set { this._strUserAddress = value; } }
            public string UserPhone { get { return _strUserPhone; } set { this._strUserPhone = value; } }
            public UserDetail(string strUserName, string strUserAddress, string strUserPhone)
            {
                this._strUserName = strUserName;
                this._strUserAddress = strUserAddress;
                this._strUserPhone = strUserPhone;
            }
        }
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Test Cache</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ScriptManager1" runat="server">
        </ext:ResourceManager>
        <ext:Store ID="stTest" runat="server">
            <Reader>
            </Reader>
        </ext:Store>
        <ext:Viewport ID="vportTest" runat="server">
            <Content>
                <ext:BorderLayout ID="brdTest" runat="server">
                    <North>
                        <ext:Panel ID="pnlButtons" runat="server" Height="30">
                            <Content>
                                <ext:Button ID="btnReconfigure" runat="server" Text="Reconfigure Store">
                                    <Listeners>
                                        <Click Handler="Ext.net.DirectMethods.ReConfigureStore();" />
                                    </Listeners>
                                </ext:Button>
                            </Content>
                        </ext:Panel>
                    </North>
                    <Center>
                        <ext:GridPanel ID="grdTest" runat="server" StoreID="stTest">
                            <ColumnModel ID="grdColumnmodel">
                                <Columns>
                                </Columns>
                                <DirectEvents>
                                    <HiddenChange OnEvent="ColumnHiddenChange">
                                        <ExtraParams>
                                            <ext:Parameter Name="columnName" Value="grdColumnmodel.getColumnId(columnIndex)"
                                                Mode="Raw" />
                                        </ExtraParams>
                                    </HiddenChange>
                                </DirectEvents>
                            </ColumnModel>
                            <Plugins>
                                <ext:GridFilters runat="server" ID="grdTestFilters">
                                    <Filters>
                                    </Filters>
                                </ext:GridFilters>
                            </Plugins>
                            <View>
                                <ext:GridView ForceFit="true">
                                </ext:GridView>
                            </View>
                        </ext:GridPanel>
                    </Center>
                </ext:BorderLayout>
            </Content>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by Daniil; Oct 20, 2011 at 6:26 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Quote Originally Posted by speedstepmem3 View Post
    1. Now I proceed to hide a column, I get Coolite Error and the HiddenChange event is not getting fired.
    Please use HiddenChange listener + DirectMethod instead of DirectEvent

    Quote Originally Posted by speedstepmem3 View Post
    2. The Grid Filters are not getting displayed.
    Please investigate the related thread.
    http://forums.ext.net/showthread.php?12916
  3. #3

    Hidden Change and Grid Filters are not working after Grid Reconfigure

    Quote Originally Posted by Daniil View Post
    Hi,



    Please use HiddenChange listener + DirectMethod instead of DirectEvent



    Please investigate the related thread.
    http://forums.ext.net/showthread.php?12916
    1. How do i Pass the Extra Parameters when it is a DirectMethod ? also when the Grids other DirectEvent like RowSelect Events are working why the HiddenChange DirectEvent is not working ?
  4. #4
    Because .Reconfigure() re-renders a ColumnModel, but not SelectionModel.

    Please pass parameters just as arguments of DirectMethod, see #3 here:
    https://examples1.ext.net/#/Events/D...hods/Overview/

    By the way.

    Maybe re-rendering GridPanel would be simpler solution in your case than .Reconfigure().
    GridPanel1.Render();
    In this case please wrap the GridPanel in a <ext:Container> with Layout="FitLayout" to don't break BorderLayout.
  5. #5

    Hidden Change and Grid Filters are not working after Grid Reconfigure

    Daniil:

    You asked to generate Filters in runtime right ?.

    I am using HTTP Proxy store and i need to pass the filter value to a handler page, i already have a code

    
    stGrid.BaseParams.Add(new Parameter("filters", "#{gridPanel}.getFilterPlugin().buildQuery(#{gridPanel}.getFilterPlugin().getFilterData())", ParameterMode.Raw, true));
    so after this I call the addFilter Javascript :

    
    var addFilter = function (dataIndexes, dataIndexType) {
                gridPanel.filters.destroy();
                var filters = [];
                for (var i = 0; i < dataIndexes.length; i++) {
                    filters.push({ dataIndex: dataIndexes[i], type: dataIndexType[i] });
                }
                var newFilters = new Ext.ux.grid.GridFilters({ filters: filters });
                newFilters.init(gridPanel);
            }
    now, i am not able to do filter, what ever value I give in filter, I get only empty value in the handler page, help me to resolve this.
  6. #6
    Please re-render a GridPanel instead of .Reconfigure().
    GridPanel1.Render();
  7. #7

    Hidden Change and Grid Filters are not working after Grid Reconfigure

    Quote Originally Posted by Daniil View Post
    Please re-render a GridPanel instead of .Reconfigure().
    GridPanel1.Render();
    Daniil:

    I have to change the Columns, so i definetly need to do .Reconfigure() because .Render() not shows updated columns, so please help me on the following item.

    You asked to generate Filters in runtime right ?.

    I am using HTTP Proxy store and i need to pass the filter value to a handler page, i already have a code

    stGrid.BaseParams.Add(new Parameter("filters", "#{gridPanel}.getFilterPlugin().buildQuery(#{gridPanel}.getFilterPlugin().getFilterData())", ParameterMode.Raw, true));
    so after this I call the addFilter Javascript :

    var addFilter = function (dataIndexes, dataIndexType) { 
                gridPanel.filters.destroy(); 
                var filters = []; 
                for (var i = 0; i < dataIndexes.length; i++) { 
                    filters.push({ dataIndex: dataIndexes[i], type: dataIndexType[i] }); 
                } 
                var newFilters = new Ext.ux.grid.GridFilters({ filters: filters }); 
                newFilters.init(gridPanel); 
            }
    now, i am not able to do filter, what ever value I give in filter, I get only empty value in the handler page, help me to resolve this.
  8. #8
    .Reconfigure() is not the best in your case, because you use GridFilters.

    .Render() is the solution, because it adds a column and doesn't break filters.

    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", "test2", "test3" },
                    new object[] { "test4", "test5", "test6" },
                    new object[] { "test7", "test8", "test9" },
                };
                this.Store1.DataBind();
            }
        }
    
        protected void AddColumn(object sender, DirectEventArgs e)
        {
            Column newCol = new Column()
            {
                DataIndex = "test4",
                Header = "New Column"
            };
               
            this.GridPanel1.ColumnModel.Columns.Add(newCol);
    
            this.GridFilters1.Filters.Add(new StringFilter() { DataIndex = "test4" });
    
            this.Store1.Reader[0].Fields.Add(new RecordField() { Name = "test4" });
    
            this.Store1.DataSource = new object[] 
                { 
                    new object[] { "test1", "test2", "test3", "test4" },
                    new object[] { "test5", "test6", "test7", "test8" },
                    new object[] { "test9", "test10", "test11", "test12" },
                };
            this.Store1.DataBind();
    
            this.GridPanel1.Render();
        }
    </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>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Container runat="server">
                <Items>
                    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Reader>
                                    <ext:ArrayReader>
                                        <Fields>
                                            <ext:RecordField Name="test1" />
                                            <ext:RecordField Name="test2" />
                                            <ext:RecordField Name="test3" />
                                        </Fields>
                                    </ext:ArrayReader>
                                </Reader>
                            </ext:Store>
                        </Store>
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column Header="Test1" DataIndex="test1" />
                                <ext:Column Header="Test2" DataIndex="test2" />
                                <ext:Column Header="Test3" DataIndex="test3" />
                            </Columns>
                        </ColumnModel>
                        <Plugins>
                            <ext:GridFilters ID="GridFilters1" runat="server">
                                <Filters>
                                    <ext:StringFilter DataIndex="test1" />
                                    <ext:StringFilter DataIndex="test2" />
                                    <ext:StringFilter DataIndex="test3" />
                                </Filters>
                            </ext:GridFilters>
                        </Plugins>
                    </ext:GridPanel>
                </Items>
            </ext:Container>
            <ext:Button runat="server" Text="Add a column" OnDirectClick="AddColumn" />
        </form>
    </body>
    </html>
  9. #9

    Render also throws error

    I tried using Render method, But it too throws me an error, this thing is driving me bad, I get a javascript error dom.style is undefined, in scrolltop function, Actually I have a "MaintainScroll" plugin with my grid panel. If I remove this plugin and try, I get another error from selection model,

    Can some one help me out, I just want to dynamically add columns to my grid on postback thats it sounds simple right.....??

    I have paging , maintain scroll plugin, filter plugin associated with my grid panel help me out.!


    Quote Originally Posted by Daniil View Post
    .Reconfigure() is not the best in your case, because you use GridFilters.

    .Render() is the solution, because it adds a column and doesn't break filters.

    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", "test2", "test3" },
                    new object[] { "test4", "test5", "test6" },
                    new object[] { "test7", "test8", "test9" },
                };
                this.Store1.DataBind();
            }
        }
    
        protected void AddColumn(object sender, DirectEventArgs e)
        {
            Column newCol = new Column()
            {
                DataIndex = "test4",
                Header = "New Column"
            };
               
            this.GridPanel1.ColumnModel.Columns.Add(newCol);
    
            this.GridFilters1.Filters.Add(new StringFilter() { DataIndex = "test4" });
    
            this.Store1.Reader[0].Fields.Add(new RecordField() { Name = "test4" });
    
            this.Store1.DataSource = new object[] 
                { 
                    new object[] { "test1", "test2", "test3", "test4" },
                    new object[] { "test5", "test6", "test7", "test8" },
                    new object[] { "test9", "test10", "test11", "test12" },
                };
            this.Store1.DataBind();
    
            this.GridPanel1.Render();
        }
    </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>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Container runat="server">
                <Items>
                    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Reader>
                                    <ext:ArrayReader>
                                        <Fields>
                                            <ext:RecordField Name="test1" />
                                            <ext:RecordField Name="test2" />
                                            <ext:RecordField Name="test3" />
                                        </Fields>
                                    </ext:ArrayReader>
                                </Reader>
                            </ext:Store>
                        </Store>
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column Header="Test1" DataIndex="test1" />
                                <ext:Column Header="Test2" DataIndex="test2" />
                                <ext:Column Header="Test3" DataIndex="test3" />
                            </Columns>
                        </ColumnModel>
                        <Plugins>
                            <ext:GridFilters ID="GridFilters1" runat="server">
                                <Filters>
                                    <ext:StringFilter DataIndex="test1" />
                                    <ext:StringFilter DataIndex="test2" />
                                    <ext:StringFilter DataIndex="test3" />
                                </Filters>
                            </ext:GridFilters>
                        </Plugins>
                    </ext:GridPanel>
                </Items>
            </ext:Container>
            <ext:Button runat="server" Text="Add a column" OnDirectClick="AddColumn" />
        </form>
    </body>
    </html>
  10. #10
    You can use AddColumn/RemoveColumn/InsertColumn methods of GridPanel
    Thosed methods are not required reconfigure

    IMHO Render calling is best solution in your case, i am not sure what issues do you have with Render method. Would be best if you post a sample which demonstrates the issues
Page 1 of 2 12 LastLast

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. Replies: 22
    Last Post: Jan 25, 2012, 8:46 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. Replies: 16
    Last Post: Feb 23, 2011, 10:03 AM
  5. [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

Tags for this Thread

Posting Permissions