PDA

View Full Version : [CLOSED] Check / uncheck all pages checkboxes (checkboxselection) of gridpanel



PriceRightHTML5team
Sep 23, 2013, 11:35 AM
Hi
I have a requirement matching to this example
http://examples2.ext.net/#/GridPanel/Selection_Models/Checkbox_Selection/
An extra requirement is that, when user checks/unchecks the gridheader checkbox all checkboxes of all pages should get checked/unchecked.
Application is in Razor view engine.
How to achieve this feature

Daniil
Sep 23, 2013, 2:23 PM
Hi @PriceRightHTML5team,

I can suggest the following solution. Please see the CheckboxSelectionModel's CustomConfig. It will be the same in Razor except syntax.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1" },
new object[] { "test2" },
new object[] { "test3" },
new object[] { "test4" },
new object[] { "test5" },
new object[] { "test6" },
new object[] { "test7" },
new object[] { "test8" },
new object[] { "test9" }
};
}
}
</script>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
var customOnHeaderClick = function (headerCt, header, e) {
if (header.isCheckerHd) {
e.stopEvent();
var me = this,
isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on'),
grid = me.view.panel,
smPlugin = grid.getSelectionMemory();

// Prevent focus changes on the view, since we're selecting/deselecting all records
me.preventFocus = true;

if (isChecked) {
me.deselectAll();
smPlugin.clearMemory();
} else {
me.selectAll();
Ext.each(grid.getStore().getAllRange(), function (rec, index) {
smPlugin.selectedIds[rec.getId()] ={
id : rec.getId(),
index : index
};
});
}

delete me.preventFocus;
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server" PageSize="3">
<Model>
<ext:Model runat="server" IDProperty="test">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel runat="server">
<CustomConfig>
<ext:ConfigItem Name="onHeaderClick" Value="customOnHeaderClick" Mode="Raw" />
</CustomConfig>
</ext:CheckboxSelectionModel>
</SelectionModel>
<BottomBar>
<ext:PagingToolbar runat="server" />
</BottomBar>
</ext:GridPanel>
</form>
</body>
</html>