Sep 13, 2021, 5:15 AM
Problem with client side grid and selection
Hello
I need to bind grid that has paging enabled with clientside data and my problem is that selectionModel returns only records on current page
I'm using this code
problematic line is probably grid.loadPage(1), hovewer if i remove the line, grid is not paged after loaded
full example is just little modified
https://examples5.ext.net/#/GridPane...rayWithPaging/
in order to reproduce problem click "load data" and then "get selection" button, Selection returns 1 even there are 3 reords selected
full code :
I need to bind grid that has paging enabled with clientside data and my problem is that selectionModel returns only records on current page
I'm using this code
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);
}
problematic line is probably grid.loadPage(1), hovewer if i remove the line, grid is not paged after loaded
full example is just little modified
https://examples5.ext.net/#/GridPane...rayWithPaging/
in order to reproduce problem click "load data" and then "get selection" button, Selection returns 1 even there are 3 reords selected
full code :
<%@ 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>
var template = '<span style="color:{0};">{1}</span>';
var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};
var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};
function getSelection() {
var grid = <%= GridPanel1.ClientID %>;
var selection = grid.getSelectionModel().getSelection();
alert(selection.length); // returns 1 hovewer expected to return 3 as 3 records are selected (1,11,12)
}
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);
grid.getSelectionModel().select(1, true);
grid.getSelectionModel().select(11, true);
grid.getSelectionModel().select(12,true);
grid.getView().refresh();
}
</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="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="Get Selection" Icon="Printer" Handler="getSelection()" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>
</form>
</body>
</html>