Mar 16, 2023, 11:24 AM
[CLOSED] Problem with checkbox selection
Hello
I'm facing strange problem with checkbox selection in the grid.
Its reproducible only "sometimes" but on example below you can reproduce
steps
1) select two records on page 1
2) select one record on page 2
3) return to page 1 and just call .getSelected() method - 2 is returned, while expected is 3
example below ( I tried to do the same think programatically and it works fine)
I tried to record video as well
Thanks
Jiri
I'm facing strange problem with checkbox selection in the grid.
Its reproducible only "sometimes" but on example below you can reproduce
steps
1) select two records on page 1
2) select one record on page 2
3) return to page 1 and just call .getSelected() method - 2 is returned, while expected is 3
example below ( I tried to do the same think programatically and it works fine)
I tried to record video as well
Thanks
Jiri
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Xml.Xsl" %>
<%@ Import Namespace="System.Xml" %>
<%@ Import Namespace="System.Linq" %>
<script runat="server">
</script>
<!DOCTYPE html>
<html>
<head runat="server">
</head>
<body>
<script>
function getSelectedRecords() {
var store = <%= GridPanel1.ClientID %>.store;
var grid = <%= GridPanel1.ClientID %>;
var selModel = grid.selModel;
console.info('Selected: ' + selModel.getSelection().length)
}
function processEror() {
var store = <%= GridPanel1.ClientID %>.store;
var grid = <%= GridPanel1.ClientID %>;
var selModel = grid.selModel;
selModel.select(store.getById(1),true);
selModel.select(store.getById(2),true);
console.info('Selected: ' + selModel.getSelection().length)
selModel.select(store.getById(8),true);
console.info('Selected: ' + selModel.getSelection().length)
store.loadPage(1);
console.info('Selected: ' + selModel.getSelection().length)
}
Ext.onReady(function () {
var ret = [];
var store = <%= GridPanel1.ClientID %>.store;
for (var i = 0; i < 100; i++) {
ret.push({
Id: i,
Text: 'Text' + i
});
}
// store.loadPage(2);
store.loadData(ret);
});
</script>
<form runat="server">
<ext:ResourceManager runat="server" Theme="Gray" Namespace="" RethrowAjaxExceptions="true"/>
<ext:Button runat="server" Text="GetSelected Records" OnClientClick="getSelectedRecords()"></ext:Button>
<ext:Button runat="server" Text="Process Error programatically" OnClientClick="processEror()"></ext:Button>
<ext:GridPanel
id="GridPanel1"
runat="server"
Title="DataTable Grid"
Stateful="True"
StateID="gridState"
>
<Store>
<ext:Store runat="server" ID="Store1"
PageSize="10" AutoLoad="true" RemoteSort="false" RemotePaging="false">
<Sorters>
<ext:DataSorter Property="Text"/>
</Sorters>
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id"/>
<ext:ModelField Name="Text"/>
<ext:ModelField Name="VersionStamp" />
<ext:ModelField Name="IsRetired" Type="Boolean" AllowNull="False"/>
<ext:ModelField Name="IsSaved" Type="Boolean" AllowNull="False"/>
<ext:ModelField Name="IsDeleted" Type="Boolean" AllowNull="False"/>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Id" DataIndex="Id" Flex="1"/>
<ext:ComponentColumn runat="server" Text="Text" DataIndex="Text" Flex="1" Editor="True">
<Component>
<ext:TextField runat="server"></ext:TextField>
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel runat="server" Mode="Simple">
</ext:CheckboxSelectionModel>
</SelectionModel>
<BottomBar>
<ext:PagingToolbar runat="server" StoreID="Store1" />
</BottomBar>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by fabricio.murta; Mar 22, 2023 at 7:26 PM.