[CLOSED] Reload buffered grid with scroll position and row selection restore

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [CLOSED] Reload buffered grid with scroll position and row selection restore

    Hello support team,
    what I want to achieve is to scroll through the buffered grid to any position, reload the grid, and if any rows have been selected, re-select them and focus that selection. Here is a simplified scenario:

    @using Ext.Net;
    @using Ext.Net.MVC;
    
    @{
        ViewBag.Title = "Grid with buffered store";
        Layout = null;
    
        var X = Html.X();
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Ext.NET MVC Test Case</title>
    
        <script type="text/javascript">
    
            var gridInit = function (grid) {
                var store = grid.getStore(),
                    view = grid.getView();
    
                // Focus on the first row after the initial store load:
                store.on({
                    load: {
                        fn: function (records, operation, success) {
                            if (store.getCount() > 0) grid.getSelectionModel().select(0);
                            view.focus();
                        },
                        scope: this,
                        single: true
                    },
                });
            }
    
            var getSelection = function (grid) {
                var s = grid.getSelectionModel().getSelection();
    
                s.currentPage = grid.getStore().currentPage;
    
                return s
            }
    
            var restoreSelection = function (grid, selection) {
                var s = [];
    
                if (selection.length > 0) {
                    grid.getView().restoreScrollState();
    
                    for (var i = 0; i < selection.length; i++) {
                        console.log("FIND_ID", selection[i].get("threadid"));
                        var record = grid.getStore().findRecord("threadid", selection[i].get("threadid"));
                        console.log("RECORD", record);
                        if (!Ext.isEmpty(record)) {
                            s.push(record);
                        }
                    }
    
                    grid.getSelectionModel().select(s);
                }
    
                return s;
            }
    
            var gridReload = function (grid) {
                var store = grid.getStore(),
                    view = grid.getView(),
                    selection = getSelection(grid);
    
                view.preserveScrollOnReload = true;
    
                //store.reload(function (records, operation, success) { console.log("NEVER_HAPPEN"); });
                store.reload({
                    callback: function (records, operation, success) {
                        console.log("RELOAD_CALLBACK", records[0].data);
                        s = restoreSelection(grid, selection);
                        if (s.length > 0) view.focusRow(s[s.length - 1], 10);
                    }
                });
            }
    
            var gotoLine = function (grid, row) {
                grid.view.bufferedRenderer.scrollTo(row - 1, true);
            };
    
        </script>
    </head>
    
    <body>
        @X.ResourceManager()
    
        @X.DisplayField().ID("version").ReadOnly(true).Margin(10).Width(200)
        
        @(
            X.GridPanel()
                .Title("Buffered Grid (6678 records)")
                .Margin(10)
                .Width(600)
                .Height(300)
                .MultiSelect(true)
                .Listeners(l => l.AfterRender.Handler = "gridInit(this)")
                .Store(X.Store()
                    .AutoLoad(true)
                    .Buffered(true)
                    .PageSize(50)
                    .LeadingBufferZone(10)
                    .TrailingBufferZone(20)
                    .Model(X.Model()
                        .IDProperty("threadid")
                        .Fields(
                            new ModelField("threadid"),
                            new ModelField("forumid"),
                            new ModelField("title"),
                            new ModelField("username"),
                            new ModelField("replycount", ModelFieldType.Int)
                        )
                    )
                    .Proxy(X.JsonPProxy()
                        .Url("https://www.sencha.com/forum/remote_topics/index.php")
                        .Reader(X.JsonReader()
                            .RootProperty("topics")
                            .TotalProperty("totalCount")
                        )
                    )
                )
                .ColumnModel(
                    X.RowNumbererColumn().Width(40),
                    X.Column().Text("Id").DataIndex("forumid").Width(30),
                    X.Column().Text("Title").DataIndex("title").Flex(1),
                    X.Column().Text("Username").DataIndex("username").Width(120),
                    X.Column().Text("#").DataIndex("replycount").Width(30)
                )
                .SelectionModel(X.RowSelectionModel().PruneRemoved(false))
                .TopBar(X.Toolbar()
                    .Items(
                        X.Button()
                            .Text("Reload")
                            .Listeners(l => l.Click.Handler = "gridReload(this.up('grid'))")
                    )
                )
                .BottomBar(X.Toolbar()
                    .Items(
                        X.NumberField()
                            .FieldLabel("Jump to row")
                            .MinValue(1)
                            .MaxValue(5000)
                            .AllowDecimals(false),
                        X.Button()
                            .Text("Go")
                            .Listeners(l => l.Click.Handler = "gotoLine(this.up('grid'), this.up('toolbar').down('numberfield').getValue())")
                    )
                )
        )
    </body>
    </html>
    
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.getCmp("version").setValue("Ext JS " + Ext.getVersion().version + " / " + "Ext.NET " + Ext.net.Version);
        });
    </script>
    The problem is that the behavior is completely unpredictable. Sometimes I can scroll down and up the grid, select one or more rows, reload the grid ... and everything works fine. But usually, I get an error right after the first reload (no scrolling, no selection, just open the application and click on the reload button), sometimes it works well for the first few reloads, and then an error occurs:

    Click image for larger version. 

Name:	console_log.jpg 
Views:	233 
Size:	86.4 KB 
ID:	25485

    When I jump to row 1000 and then reload the grid, the result is just empty grid.

    It is also confusing to see records passed to a reload callback, but the records cannot be found in the store using findRecord and it still crashes.

    This callback will also never be executed, although according to the documentation it should:

    store.reload(function(records, operation, success) {
        console.log('loaded records');
    });
    Such mistakes are sometimes difficult to describe, but hopefuly my intention is clear and the problems demonstrable.

    Any help is appreciated. Thank you for your assistance.

    Ext JS 7.3.1.27 / Ext.NET 5.3.0 / Chrome 87.0.4280.88

    Kind regards
    Dan
    Last edited by fabricio.murta; Jan 13, 2021 at 2:58 PM.

Similar Threads

  1. Replies: 6
    Last Post: Feb 25, 2017, 3:51 AM
  2. Replies: 5
    Last Post: Apr 27, 2016, 12:43 AM
  3. [CLOSED] Error in buffered grid
    By RCM in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Nov 25, 2013, 2:31 PM
  4. [CLOSED] Error in buffered grid
    By RCM in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Nov 22, 2013, 6:43 PM
  5. [CLOSED] Buffered Grid with filtering and editing
    By jchau in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 13, 2013, 6:39 AM

Tags for this Thread

Posting Permissions