Sep 17, 2021, 7:40 AM
Problem with removing records from grid
Hello
I'm posting in fact 3 issues in single one, but I think the bottom line problem is the same for all.
In short - I have grid that gets records in javascript and as well I need to remove the records sometimes
I have problem removing records that are not in the current page of the grid
Here is full code ( mostly borrowed from your examples)
In order to reproduce, click "load Data" and then one of remove buttons
I'm posting in fact 3 issues in single one, but I think the bottom line problem is the same for all.
In short - I have grid that gets records in javascript and as well I need to remove the records sometimes
I have problem removing records that are not in the current page of the grid
Here is full code ( mostly borrowed from your examples)
In order to reproduce, click "load Data" and then one of remove buttons
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
function removeData() {
var grid = <%= GridPanel1.ClientID %>;
var toRemove = [];
for (var i = 0; i < grid.store.getCount(); i++) {
var record = grid.store.getById(i);
toRemove.push(record);
}
grid.store.remove(toRemove);
grid.store.loadPage(1);
alert('expected number of record 0, displayed 90, why store.getCount() equals to 10 and not 100?')
}
function removeData2() {
var grid = <%= GridPanel1.ClientID %>;
var allRecords = [];
grid.store.each(function(record) {
allRecords.push(record);
});
for (var i = 0; i < allRecords.length; i++) {
grid.store.remove(allRecords[i]);
}
grid.store.loadPage(1);
alert('expected number of record 0, displayed 90')
}
function removeData3() {
var grid = <%= GridPanel1.ClientID %>;
var record = grid.store.getById(20);
grid.store.remove(record);
record = grid.store.getById(5);
grid.store.remove(record);
grid.store.loadPage(1);
alert('expected number of record is 98, displayed 99')
}
function loadData() {
var grid = <%= GridPanel1.ClientID %>;
var data = [];
for (var i = 0; i < 100; i++) {
data.push({
id: i,
company: 'Company' + i
});
}
grid.store.add(data);
grid.store.loadPage(1);
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" Namespace="" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Array Grid"
Width="800">
<Store>
<ext:Store ID="Store1" runat="server" PageSize="10">
<Model>
<ext:Model runat="server" IDProperty="id">
<Fields>
<ext:ModelField Name="id" />
<ext:ModelField Name="company" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="id" DataIndex="id" Flex="1" />
<ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel runat="server" Mode="Multi" />
</SelectionModel>
<View>
<ext:GridView runat="server" StripeRows="true" />
</View>
<BottomBar>
<ext:PagingToolbar runat="server">
</ext:PagingToolbar>
</BottomBar>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Load Data" Icon="Printer" Handler="loadData()" />
<ext:Button runat="server" Text="Remove Data" Icon="Printer" Handler="removeData()" />
<ext:Button runat="server" Text="Remove Data 2" Icon="Printer" Handler="removeData2()" />
<ext:Button runat="server" Text="Remove Data 3" Icon="Printer" Handler="removeData3()" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>
</form>
</body>
</html>
Thanks for help