1 Attachment(s)
[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:
Code:
@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:
Attachment 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:
Code:
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
