Jan 07, 2021, 6:16 PM
[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:
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
This callback will also never be executed, although according to the documentation it should:
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
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>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');
});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 3:58 PM.
Originally Posted by NewLink
