[CLOSED] grid column autoresize not working after grid reconfig

  1. #1

    [CLOSED] grid column autoresize not working after grid reconfig

    Hi, Our user got following error when resize columns:

    "ext.axd?v=4.2.0:19 Uncaught TypeError: Cannot read property 'autoSizeColumn' of undefined"

    I can reproduce it with minor change on your demo code.
    To reproduce: click reconfig button then click auto fit button.

    We are using 4.2, not sure if this is issue on higher version but we cannot change version for now.

    Please help!
    Thanks
    -Susan


    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="Button=Ext.Net.Button" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }
        }
    
        protected void AddColumn(object sender, DirectEventArgs e)
        {
            ((Button)sender).Disabled = true;
    
            ModelField field = new ModelField("pctChange", ModelFieldType.Float);
    
            //we need specify index because we use ArrayReader which parse data source by index
    
            this.Store1.AddField(field, 3);
            this.Store1.Model[0].Fields.Insert(3, field);
    
            this.BindData();
    
            Column col = new Column();
            col.Text = "Change %";
            col.Width = 75;
            col.Sortable = true;
            col.DataIndex = "pctChange";
            col.Renderer.Fn = "pctChange";
    
            ComboBox cb = new ComboBox();
            cb.Items.Add(new Ext.Net.ListItem("1", "1"));
            cb.Items.Add(new Ext.Net.ListItem("2", "2"));
            cb.Items.Add(new Ext.Net.ListItem("3", "3"));
            this.Controls.Add(cb);
    
            col.Editor.Add(cb);
    
            this.GridPanel1.AddColumn(col);
        }
    
        protected void InsertColumn(object sender, DirectEventArgs e)
        {
            ((Button)sender).Disabled = true;
    
            DateColumn col = new DateColumn
            {
                Text = "Last Updated",
                Width = 85,
                Sortable = true,
                DataIndex = "lastChange",
                Format = "M/d/yyyy"
            };
    
            this.GridPanel1.InsertColumn(1, col);
        }
    
        protected void Reconfigure(object sender, DirectEventArgs e)
        {
            ((Button)sender).Disabled = true;
    
            this.GridPanel1.ColumnModel.Columns.RemoveAt(1);
            this.GridPanel1.ColumnModel.Columns.RemoveAt(1);
            this.GridPanel1.Reconfigure();
        }
    
        private void BindData()
        {
            this.Store1.DataSource = this.Data;
            this.Store1.DataBind();
        }
    
        private object Data
        {
            get
            {
                return new List<object>
                {
                   new { company = "3m Co", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = "9/1 12:00am" },
                   new { company = "Alcoa Inc", price = 29.01, change = 0.42, pctChange = 1.47, lastChange = "9/1 12:00am" },
                   new { company = "Altria Group Inc", price = 83.81, change = 0.28, pctChange = 0.34, lastChange = "9/1 12:00am" },
                   new { company = "American Express Company", price = 52.55, change = 0.01, pctChange = 0.02, lastChange = "9/1 12:00am" },
                   new { company = "American International Group, Inc.", price = 64.13, change = 0.31, pctChange = 0.49, lastChange = "9/1 12:00am" },
                   new { company = "AT&T Inc.", price = 31.61, change = -0.48, pctChange = -1.54, lastChange = "9/1 12:00am" },
                   new { company = "Boeing Co.", price = 75.43, change = 0.53, pctChange = 0.71, lastChange = "9/1 12:00am" },
                   new { company = "Caterpillar Inc.", price = 67.27, change = 0.92, pctChange = 1.39, lastChange = "9/1 12:00am" },
                   new { company = "Citigroup, Inc.", price = 49.37, change = 0.02, pctChange = 0.04, lastChange = "9/1 12:00am" },
                   new { company = "E.I. du Pont de Nemours and Company", price = 40.48, change = 0.51, pctChange = 1.28, lastChange = "9/1 12:00am" },
                   new { company = "Exxon Mobil Corp", price = 68.1, change = -0.43, pctChange = -0.64, lastChange = "9/1 12:00am" },
                   new { company = "General Electric Company", price = 34.14, change = -0.08, pctChange = -0.23, lastChange = "9/1 12:00am" },
                   new { company = "General Motors Corporation", price = 30.27, change = 1.09, pctChange = 3.74, lastChange = "9/1 12:00am" },
                   new { company = "Hewlett-Packard Co.",  price = 36.53, change = -0.03, pctChange = -0.08, lastChange = "9/1 12:00am" },
                   new { company = "Honeywell Intl Inc",  price = 38.77, change = 0.05, pctChange = 0.13, lastChange = "9/1 12:00am" },
                   new { company = "Intel Corporation",  price = 19.88, change = 0.31, pctChange = 1.58, lastChange = "9/1 12:00am" },
                   new { company = "International Business Machines",  price = 81.41, change = 0.44, pctChange = 0.54, lastChange = "9/1 12:00am" },
                   new { company = "Johnson & Johnson",  price = 64.72, change = 0.06, pctChange = 0.09, lastChange = "9/1 12:00am" },
                   new { company = "JP Morgan & Chase & Co",  price = 45.73, change = 0.07, pctChange = 0.15, lastChange = "9/1 12:00am" },
                   new { company = "McDonald\"s Corporation",  price = 36.76, change = 0.86, pctChange = 2.40, lastChange = "9/1 12:00am" },
                   new { company = "Merck & Co., Inc.",  price = 40.96, change = 0.41, pctChange = 1.01, lastChange = "9/1 12:00am" },
                   new { company = "Microsoft Corporation",  price = 25.84, change = 0.14, pctChange = 0.54, lastChange = "9/1 12:00am" },
                   new { company = "Pfizer Inc",  price = 27.96, change = 0.4, pctChange = 1.45, lastChange = "9/1 12:00am" },
                   new { company = "The Coca-Cola Company",  price = 45.07, change = 0.26, pctChange = 0.58, lastChange = "9/1 12:00am" },
                   new { company = "The Home Depot, Inc.",  price = 34.64, change = 0.35, pctChange = 1.02, lastChange = "9/1 12:00am" },
                   new { company = "The Procter & Gamble Company",  price = 61.91, change = 0.01, pctChange = 0.02, lastChange = "9/1 12:00am" },
                   new { company = "United Technologies Corporation",  price = 63.26, change = 0.55, pctChange = 0.88, lastChange = "9/1 12:00am" },
                   new { company = "Verizon Communications",  price = 35.57, change = 0.39, pctChange = 1.11, lastChange = "9/1 12:00am" },
                   new { company = "Wal-Mart Stores, Inc.",  price = 45.45, change = 0.73, pctChange = 1.63, lastChange = "9/1 12:00am" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Simple Array Grid - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <script>
            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>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>Modify ColumnModel during DirectEvent</h1>
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Array Grid"
                Width="600"
                Height="350">
                <Store>
                    <ext:Store ID="Store1" 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="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                        <ext:Column runat="server" Text="Price" Width="75" DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" Width="75" DataIndex="change" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" Mode="Single" />
                </SelectionModel>
                <View>
                    <ext:GridView runat="server" StripeRows="true" TrackOver="true" />
                </View>
                <BottomBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:ToolbarFill runat="server" />
                            <ext:Button runat="server" Text="Add Column">
                                 <DirectEvents>
                                    <Click OnEvent="AddColumn" Single="true" />
                                 </DirectEvents>
                            </ext:Button>
                            <ext:Button runat="server" Text="Insert Column">
                                 <DirectEvents>
                                    <Click OnEvent="InsertColumn" Single="true" />
                                 </DirectEvents>
                            </ext:Button>
                             <ext:Button runat="server" Text="Reconfigure">
                                 <DirectEvents>
                                    <Click OnEvent="Reconfigure" Single="true" />
                                 </DirectEvents>
                            </ext:Button>
                             <ext:Button runat="server" Text="auto fit" OnClientClick ="this.up('grid').columns.forEach(function(col) { col.autoSize(); });" >
                             </ext:Button>
                        
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; Dec 05, 2017 at 4:07 PM.
  2. #2
    Hello Susan!

    That was a tricky one! Only when trying to reproduce the issue with pure ExtJS on Sencha fiddle I could realize what was wrong.

    In fact, the problem happens with the current version of Ext.NET, but this is due to the way you are accessing the columns from the grid.

    Use getColumns() instead of columns (use the getter-method) in order to get actual instances of the rendered columns on the grid, in your code's line 195.

    The columns is a config option and it is not guaranteed to have actual copies of the rendered columns if accessed directly. In general, whenever you have a getter for a property, you should rely on that. Properties/configs without getters are not supposed to be accessed and should be used "at your risk".

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Great! Thank you so much! That does solve my issue. Thanks for your advice.
    Thanks!
    -susan
  4. #4
    Hello! Glad it helped! Thanks for the feedback, I'll mark the thread as closed, then.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Custom filterHeader + grid reconfig issue
    By susanz in forum 3.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 26, 2016, 9:53 PM
  2. [CLOSED] Grid panel column locking is not working in the pop up.
    By arjunrvasisht in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: May 25, 2015, 9:00 AM
  3. Replies: 2
    Last Post: Jan 28, 2014, 10:08 AM
  4. Replies: 1
    Last Post: Aug 31, 2010, 6:33 AM
  5. Editor.Add for grid column not working on 0.7?
    By _Belial in forum 1.x Help
    Replies: 9
    Last Post: Mar 25, 2009, 5:12 AM

Posting Permissions