Oct 05, 2012, 2:33 PM
[CLOSED] GridPanel with CheckboxSelectionModel: select and deselect records
Hi,
I'm using GridPanel with CheckboxSelectionModel and PagingToolbar. I need to select some records on different pages and deselect previously selected. But I have several issue. sm.select() function selects records on current and next pages, but doesn't select on third. When I go to next page and return back to first, selection disappears. sm.deselectAll() doesn't clear selection on second page. The workaround for 1.X is not working here. Could you please suggest how I can resolve this.
Thank you.
I'm using GridPanel with CheckboxSelectionModel and PagingToolbar. I need to select some records on different pages and deselect previously selected. But I have several issue. sm.select() function selects records on current and next pages, but doesn't select on third. When I go to next page and return back to first, selection disappears. sm.deselectAll() doesn't clear selection on second page. The workaround for 1.X is not working here. Could you please suggest how I can resolve this.
Thank you.
<script runat="server">
public class Company
{
public int ID { get; set; }
public string Name { get; set; }
public double Price { get; set; }
public double Change { get; set; }
public double PctChange { get; set; }
public DateTime LastChange { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.BindData();
}
}
private void BindData()
{
this.Store1.DataSource = this.GetData();
this.Store1.DataBind();
}
private List<Company> GetData()
{
return new List<Company>
{
new Company { ID = 1, Name = "3m Co", Price = 71.72, Change = 0.02, PctChange = 0.03, LastChange = DateTime.Now },
new Company { ID = 2, Name = "Alcoa Inc", Price = 29.01, Change = 0.42, PctChange = 1.47, LastChange = DateTime.Now },
new Company { ID = 3, Name = "Altria Group Inc", Price = 83.81, Change = 0.28, PctChange = 0.34, LastChange = DateTime.Now },
new Company { ID = 4, Name = "American Express Company", Price = 52.55, Change = 0.01, PctChange = 0.02, LastChange = DateTime.Now },
new Company { ID = 5, Name = "American International Group, Inc.", Price = 64.13, Change = 0.31, PctChange = 0.49, LastChange = DateTime.Now },
new Company { ID = 6, Name = "AT&T Inc.", Price = 31.61, Change = -0.48, PctChange = -1.54, LastChange = DateTime.Now },
new Company { ID = 7, Name = "Boeing Co.", Price = 75.43, Change = 0.53, PctChange = 0.71, LastChange = DateTime.Now },
new Company { ID = 8, Name = "Caterpillar Inc.", Price = 67.27, Change = 0.92, PctChange = 1.39, LastChange = DateTime.Now },
new Company { ID = 9, Name = "Citigroup, Inc.", Price = 49.37, Change = 0.02, PctChange = 0.04, LastChange = DateTime.Now },
new Company { ID = 10, Name = "E.I. du Pont de Nemours and Company", Price = 40.48, Change = 0.51, PctChange = 1.28, LastChange = DateTime.Now },
new Company { ID = 11, Name = "Exxon Mobil Corp", Price = 68.1, Change = -0.43, PctChange = -0.64, LastChange = DateTime.Now },
new Company { ID = 12, Name = "General Electric Company", Price = 34.14, Change = -0.08, PctChange = -0.23, LastChange = DateTime.Now },
new Company { ID = 13, Name = "General Motors Corporation", Price = 30.27, Change = 1.09, PctChange = 3.74, LastChange = DateTime.Now },
new Company { ID = 14, Name = "Hewlett-Packard Co.", Price = 36.53, Change = -0.03, PctChange = -0.08, LastChange = DateTime.Now },
new Company { ID = 15, Name = "Honeywell Intl Inc", Price = 38.77, Change = 0.05, PctChange = 0.13, LastChange = DateTime.Now },
new Company { ID = 16, Name = "Intel Corporation", Price = 19.88, Change = 0.31, PctChange = 1.58, LastChange = DateTime.Now }
};
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>GridPanel</title>
<script type="text/javascript">
var selectRecords = function (num, grid) {
var sm = grid.getSelectionModel(),
ids1 = [1, 4, 7],
ids2 = [2, 5, 8],
arrayId, idsToSelect = [];
if (num === 1)
arrayId = ids1;
else
arrayId = ids2;
var i = 0,
store = grid.getStore(),
records = [];
for (; i < 3; i++) {
record = store.getById(arrayId[i]);
records.push(record);
}
sm.deselectAll();
sm.select(records);
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store ID="Store1" runat="server" RemotePaging="false" PageSize="3" >
<Model>
<ext:Model runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID"/>
<ext:ModelField Name="Name"/>
</Fields>
</ext:Model>
</Model>
<AutoLoadParams>
<ext:Parameter Name="start" Value="0" Mode="Raw" />
<ext:Parameter Name="limit" Value="3" Mode="Raw" />
</AutoLoadParams>
</ext:Store>
<ext:GridPanel
runat="server"
ID="GridPanel1" StoreID="Store1"
Title="Employees"
Frame="true"
Height="300" Width="500">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column runat="server" Text="ID" Width="60" DataIndex="ID" >
</ext:Column>
<ext:Column runat="server" Text="Full Name" Width="150" DataIndex="Name">
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" >
</ext:GridView>
</View>
<SelectionModel>
<ext:CheckboxSelectionModel ID="SelectionModel1" runat="server" />
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" DisplayInfo="true" />
</BottomBar>
<Buttons>
<ext:Button ID="Button2" runat="server" Text="Select 1">
<Listeners>
<Click Handler="selectRecords(1,#{GridPanel1} );" />
</Listeners>
</ext:Button>
<ext:Button ID="Button3" runat="server" Text="Select 2">
<Listeners>
<Click Handler="selectRecords(2,#{GridPanel1});" />
</Listeners>
</ext:Button>
</Buttons>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by Daniil; Oct 12, 2012 at 6:04 AM.
Reason: [CLOSED]
