[FIXED] [#797] [4.4.0] Grid locking bug with more than 66 records

  1. #1

    [FIXED] [#797] [4.4.0] Grid locking bug with more than 66 records

    Hello,

    trying to lock a column on a grid that show more than 66 record gives this error:

    Click image for larger version. 

Name:	Screenshot.png 
Views:	7 
Size:	20.2 KB 
ID:	23952

    The grid works correctly with 66 rows.
    This is the code to replicate the problem

    Controller:

        public class ExtNetController : Controller
        {
            public ActionResult Index()
            {
                return View(Companies.GetAllCompanies());
            }
    
            public ActionResult SampleAction(string message)
            {
                X.Msg.Notify(new NotificationConfig
                {
                    Icon = Icon.Accept,
                    Title = "Working",
                    Html = message
                }).Show();
    
                return this.Direct();
            }
        }
    
        public class Companies
        {
            public static IEnumerable GetAllCompanies()
            {
                return new object[]
                    {
                        new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                        new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                        new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                        new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                        new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                        new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                        new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                        new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                        new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                        new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
    
                        new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                        new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                        new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                        new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                        new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                        new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                        new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                        new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                        new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                        new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                        
                                            new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                        new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                        new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                        new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                        new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                        new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                        new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                        new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                        new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" },
                        new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                        
                                            new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                        new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                        new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                        new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                        new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                        new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                        new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                        new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                        new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                        new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                        
                                            new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                        new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                        new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                        new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                        new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                        new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                        new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                        new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                        new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                        new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                        
                                            new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                                            new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                                            new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                                            new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                                            new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                                            new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                                            new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                                            new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" },
                                            new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                                            new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                        
                                            new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                                            new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                                            new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                                            new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                                            new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                                            new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                                            new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    };
            }
        }

    View:

    @using Ext.Net;
    @using Ext.Net.MVC;
    @model System.Collections.IEnumerable
    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <title>Ext.NET MVC Sample</title>
        <link type="text/css" rel="stylesheet" href="http://speed.ext.net/www/intro/css/main.css" />
        <style>
            .x-grid-row-over .x-grid-cell-inner {
                font-weight: bold;
            }
        </style>
    
        <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 + "%");
            };
    
            Ext.selection.RowModel.override({
                onLastFocusChanged: function (oldFocused, newFocused, supressFocus) {
                    var views = this.views,
                viewsLn = views.length,
                rowIdx,
                i = 0;
    
                    if (oldFocused) {
                        rowIdx = views[0].indexOf(oldFocused);
                        if (rowIdx != -1) {
                            for (; i < viewsLn; i++) {
                                views[i].onRowFocus(rowIdx, false, true);
                            }
                        }
                    }
    
                    if (newFocused) {
                        rowIdx = views[0].indexOf(newFocused);
                        if (rowIdx != -1) {
                            for (i = 0; i < viewsLn; i++) {
                                if (views[i].panel.isLocked) {
                                    if (views[i].headerCt.getVisibleGridColumns().length > 0) {
                                        views[i].onRowFocus(rowIdx, true, supressFocus);
                                    }
                                } else {
                                    views[i].onRowFocus(rowIdx, true, supressFocus);
                                }
                            }
                        }
                    }
                    this.callSuper(arguments);
                }
            });
        </script>
    </head>
    <body>
        @(Html.X().ResourceManager())
        @(
     Html.X().Viewport()
        .ID("mainViewport")
        .Layout(LayoutType.Border)
        .Items(vpitems =>
        {
            vpitems.Add(
    
                Html.X().Panel()
                .ID("processArea")
                .Region(Region.Center)
                .Layout(LayoutType.Fit)
                .Items(
                i => i.Add(
    
    Html.X().GridPanel()
    .EnableLocking(true)
                    .Title("Array Grid")
                    .Store(Html.X().Store()
                            .Model(Html.X().Model()
                                    .Fields(
                                            new ModelField("company"),
                                            new ModelField("price", ModelFieldType.Float),
                                            new ModelField("change", ModelFieldType.Float),
                                            new ModelField("pctChange", ModelFieldType.Float),
                                            new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt")
                                    )
                            )
                            .DataSource(Model)
                    )
                    .ColumnModel(
                            Html.X().Column().Text("Company").DataIndex("company").Flex(1),
                            Html.X().Column().Text("Price").DataIndex("price"),
                            Html.X().Column().Text("Change").DataIndex("change").Renderer("change"),
                            Html.X().Column().Text("Change").DataIndex("pctChange").Renderer("pctChange"),
                            Html.X().DateColumn().Text("Last Updated").DataIndex("lastChange")
                    )
    
                    )
                )
                );
    
        })
        )
    
    
    </body>
    </html>
    Best regards,
    Alberto
    Last edited by fabricio.murta; Sep 15, 2017 at 3:03 AM.
  2. #2
    Hi Alberto,

    Thank you for the report! Created an Issue:
    https://github.com/extnet/Ext.NET/issues/797

    This Sencha forum thread is about the same JavaScript error - Cannot read property 'els' of undefined. Probably, related.
    https://www.sencha.com/forum/showthread.php?300539

    As a workaround, I can suggest to set .BufferedRenderer(true) for the GridPanel.
  3. #3
    Hi Daniil,

    The BufferedRenderer property does not work for my example.
    Do you have any other suggestions ?

    Thank you very much,
    Alberto
  4. #4
    Sorry, .BufferedRenderer(false), not true.
  5. #5
    Daniil,

    It works !

    But I find another problem: on locked columns, when I open the column menu to set a filter, the submenu with the textbox control does not show.

    Should I open a new issue for this new problem ?

    Best regards,
    Alberto
  6. #6
    Yes, please start a new forum thread.
  7. #7
    Hello, @AlbertoCe!

    This issue is no longer reproducible in Ext.NET 4.x, probably since one of the first releases like 4.1.0 but, as we didn't update the forum thread here, we're marking it as the current release, 4.4.0, just to be sure.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 0
    Last Post: Apr 14, 2014, 11:34 AM
  2. [CLOSED] Locking Grid with checkboxselection model
    By nhg_itd in forum 1.x Premium Help
    Replies: 4
    Last Post: Mar 15, 2012, 6:02 AM
  3. [CLOSED] Locking Grid with RowExpander plugin
    By leon_tang in forum 1.x Premium Help
    Replies: 1
    Last Post: Feb 23, 2011, 2:37 PM
  4. [CLOSED] Locking Grid and AddColumn
    By paulc in forum 1.x Premium Help
    Replies: 1
    Last Post: Feb 23, 2011, 11:05 AM
  5. [CLOSED] Grouping Grid AND Locking Columns...
    By rthiney in forum 1.x Premium Help
    Replies: 3
    Last Post: Sep 21, 2010, 6:53 PM

Tags for this Thread

Posting Permissions