Aug 24, 2012, 4:20 AM
[CLOSED] Checkbox in Gridpanel Column Header
Hi,
Is there a better implementation than the sample below in version 2.0 for adding a checkbox in a column header.
Is there a better implementation than the sample below in version 2.0 for adding a checkbox in a column header.
<%@ 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[] { "test11", "test12", "test13" },
new object[] { "test12", "test22", "test23" },
new object[] { "test13", "test32", "test33" }
};
store.DataBind();
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net Example</title>
<ext:ResourcePlaceHolder runat="server" />
<script type="text/javascript">
Ext.grid.GridView.override({
renderHeaders : function () {
var colModel = this.cm,
templates = this.templates,
headerTpl = templates.hcell,
properties = {},
colCount = colModel.getColumnCount(),
last = colCount - 1,
cells = [],
i,
cssCls;
for (i = 0; i < colCount; i++) {
if (i == 0) {
cssCls = 'x-grid3-cell-first ';
} else {
cssCls = i == last ? 'x-grid3-cell-last ' : '';
}
properties = {
id : colModel.getColumnId(i),
value : colModel.getColumnHeader(i) || '',
style : this.getColumnStyle(i, true),
css : cssCls,
tooltip : this.getColumnTooltip(i),
checked : this.checkboxes["my-header-checkbox-" + colModel.getColumnId(i)] //added
};
if (colModel.config[i].align == 'right') {
properties.istyle = 'padding-right: 16px;';
} else {
delete properties.istyle;
}
cells[i] = headerTpl.apply(properties);
}
return templates.header.apply({
cells: cells.join(""),
tstyle: String.format("width: {0};", this.getTotalWidth())
});
},
onHeaderClick : function (g, index) {
if (Ext.fly(Ext.EventObject.getTarget()).hasClass('my-header-checkbox')) { //added
return; //added
} //added
if (this.headersDisabled || !this.cm.isSortable(index)) {
return;
}
g.stopEditing(true);
g.store.sort(this.cm.getDataIndex(index));
}
});
</script>
<script type="text/javascript">
var getTemplates = function() {
return {
hcell: new Ext.Template(
'<td class="x-grid3-hd x-grid3-cell x-grid3-td-{id} {css}" style="{style}">',
'<div {tooltip} {attr} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">',
'<input id="my-header-checkbox-{id}" type="checkbox" class="my-header-checkbox" onclick="myHeaderCheckboxHandler(this, event)" {checked}></input>', // added
true ? '<a class="x-grid3-hd-btn" href="#"></a>' : '',
'{value}',
'<img alt="" class="x-grid3-sort-icon" src="', Ext.BLANK_IMAGE_URL, '" />',
'</div>',
'</td>'
)
}
}
var myHeaderCheckboxHandler = function(checkbox, event) {
GridPanel1.view.checkboxes[checkbox.id] = checkbox.checked ? "checked" : "";
//here is your handler code
}
</script>
<style type="text/css">
.my-header-checkbox {
margin-right: 10px;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
AutoHeight="true"
EnableColumnMove="false">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test1" />
<ext:RecordField Name="test2" />
<ext:RecordField Name="test3" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column ColumnID="Test1" Header="Test1" DataIndex="test1" />
<ext:Column ColumnID="Test2" Header="Test2" DataIndex="test2" />
<ext:Column ColumnID="Test3" Header="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server">
<CustomConfig>
<ext:ConfigItem Name="templates" Value="={getTemplates()}" />
<ext:ConfigItem Name="checkboxes" Value="{}" Mode="Raw" />
</CustomConfig>
</ext:GridView>
</View>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by Daniil; Aug 26, 2012 at 8:01 AM.
Reason: [CLOSED]
