[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:

Attachment 23952

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

Controller:

Code:

---

    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:

Code:

---

@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

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.

Hi Daniil,

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

Thank you very much,
Alberto

Sorry, .BufferedRenderer(false), not true.

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

Yes, please start a new forum thread.

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.