[FIXED] [#1254] [3.2.1] Problem getting GridPanel selection count when grouping
I have a gridpanel that is grouped and has a CheckboxSelectionModel.
I am finding that if I select all the records after collapsing all but one group the selection count is off by the number of collapsed groups:
Code:
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Xml" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e) {
this.Store1.DataSource = new List<Company>
{
new Company("Section 1","3m Co", 71.72, 0.02, 0.03),
new Company("Section 1","Alcoa Inc", 29.01, 0.42, 1.47),
new Company("Section 1","Altria Group Inc", 83.81, 0.28, 0.34),
new Company("Section 1","American Express Company", 52.55, 0.01, 0.02),
new Company("Section 1","American International Group, Inc.", 64.13, 0.31, 0.49),
new Company("Section 1","AT&T Inc.", 31.61, -0.48, -1.54),
new Company("Section 1","Boeing Co.", 75.43, 0.53, 0.71),
new Company("Section 1","Caterpillar Inc.", 67.27, 0.92, 1.39),
new Company("Section 1","Citigroup, Inc.", 49.37, 0.02, 0.04),
new Company("Section 2","E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28),
new Company("Section 2","Exxon Mobil Corp", 68.1, -0.43, -0.64),
new Company("Section 2","General Electric Company", 34.14, -0.08, -0.23),
new Company("Section 2","General Motors Corporation", 30.27, 1.09, 3.74),
new Company("Section 2","Hewlett-Packard Co.", 36.53, -0.03, -0.08),
new Company("Section 2","Honeywell Intl Inc", 38.77, 0.05, 0.13),
new Company("Section 2","Intel Corporation", 19.88, 0.31, 1.58),
new Company("Section 2","International Business Machines", 81.41, 0.44, 0.54),
new Company("Section 2","Johnson & Johnson", 64.72, 0.06, 0.09),
new Company("Section 2","JP Morgan & Chase & Co", 45.73, 0.07, 0.15),
new Company("Section 2","McDonald\"s Corporation", 36.76, 0.86, 2.40),
new Company("Section 2","Merck & Co., Inc.", 40.96, 0.41, 1.01),
new Company("Section 3","Microsoft Corporation", 25.84, 0.14, 0.54),
new Company("Section 3","Pfizer Inc", 27.96, 0.4, 1.45),
new Company("Section 3","The Coca-Cola Company", 45.07, 0.26, 0.58),
new Company("Section 3","The Home Depot, Inc.", 34.64, 0.35, 1.02),
new Company("Section 3","The Procter & Gamble Company", 61.91, 0.01, 0.02),
new Company("Section 3","United Technologies Corporation", 63.26, 0.55, 0.88),
new Company("Section 3","Verizon Communications", 35.57, 0.39, 1.11),
new Company("Section 3","Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63)
};
}
public class Company {
public Company(string group, string name, double price, double change, double pctChange) {
this.Group = group;
this.Name = name;
this.Price = price;
this.Change = change;
this.PctChange = pctChange;
}
public Company() {
}
public string Group { get; set; }
public string Name { get; set; }
public double Price { get; set; }
public double Change { get; set; }
public double PctChange { get; set; }
}
</script>
<html>
<head runat="server">
<title>Row Selection Model</title>
<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 + "%");
};
var CheckboxSelectionModel1_SelectionChange = function () {
var totalCount = App.GridPanel1.store.getAllRange().length,
selectedCount = App.GridPanel1.getSelectionModel().getCount();
Ext.Msg.notify("Counts ", "Total: " + totalCount + "<br/> Selected: " + selectedCount);
};
var GridPanel1_setup = function () {
App.Grouping1.collapseAll();
App.Grouping1.expand("Section 1", true);
App.CheckboxSelectionModel1.selectAll(false);
var totalCount = App.GridPanel1.store.getAllRange().length,
selectedCount = App.GridPanel1.getSelectionModel().getCount();
Ext.Msg.alert("Counts ", "Total: " + totalCount + "<br/> Selected: " + selectedCount + " <-- should be 9");
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Store ID="Store1" runat="server" GroupField="Group">
<Model>
<ext:Model runat="server" IDProperty="Name">
<Fields>
<ext:ModelField Name="Group" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="Price" />
<ext:ModelField Name="Change" />
<ext:ModelField Name="PctChange" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:GridPanel
runat="server"
ID="GridPanel1"
StoreID="Store1"
Title="Company List"
Collapsible="true"
Width="600"
Height="500">
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Company" DataIndex="Name" Flex="1" />
<ext:Column runat="server" Text="Price" Width="75" DataIndex="Price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column runat="server" Text="Change" Width="75" DataIndex="Change">
<Renderer Fn="change" />
</ext:Column>
<ext:Column runat="server" Text="Change" Width="75" DataIndex="PctChange">
<Renderer Fn="pctChange" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel runat="server" ID="CheckboxSelectionModel1" Mode="Multi" CheckOnly="true">
<Listeners>
<SelectionChange Fn="CheckboxSelectionModel1_SelectionChange" />
</Listeners>
</ext:CheckboxSelectionModel>
</SelectionModel>
<Features>
<ext:Grouping
ID="Grouping1"
runat="server"
HideGroupedHeader="true"
GroupHeaderTplString='{columnName}: {name} ({children.length} Item{[values.children.length > 1 ? "s" : ""]})'>
</ext:Grouping>
</Features>
<Listeners>
<ViewReady fn="GridPanel1_setup" Delay="50" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>
Is there a way to get the real number of selected records?
Alternatively how would I go about creating a UI that would allow the user to select all the records in a group?
