PDA

View Full Version : [CLOSED] Checkbox in Gridpanel Column Header



RCM
Aug 24, 2012, 5:20 AM
Hi,

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>

Daniil
Aug 24, 2012, 7:03 AM
Hi,

Here is a link where, probably, you took the posted example from.
http://forums.ext.net/showthread.php?13663&p=56574&viewfull=1#post56574

A solution for Ext.NET v2 looks clearer.

The myOnElClick override is needed to do not toggle sort on checkbox click. If you do not need that, it can be removed.

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", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" },
};
store.DataBind();

this.Column3.RenderTpl = new XTemplate() { Html = this.Column1.RenderTpl.Html };
this.Column3.CustomConfig.AddRange(this.Column1.Cu stomConfig);
}
}
</script>

<!DOCTYPE html>

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

<style type="text/css">
.my-header-checkbox {
margin-right: 10px;
}
</style>

<script type="text/javascript">
var myOnElClick = function (e, t) {
var me = this,
ownerHeaderCt = me.getOwnerHeaderCt();

if (ownerHeaderCt && !ownerHeaderCt.ddLock) {
if (me.triggerEl && (e.target === me.triggerEl.dom || t === me.triggerEl.dom || e.within(me.triggerEl))) {
ownerHeaderCt.onHeaderTriggerClick(me, e, t);
} else {
if (e.getKey() || (!me.isOnLeftEdge(e) && !me.isOnRightEdge(e))) {
if (!Ext.fly(t).hasCls("my-header-checkbox")) {
me.toggleSortState();
}

ownerHeaderCt.onHeaderClick(me, e, t);
}
}
}
};

var onHeaderClick = function(ct, column, e, t) {
if (Ext.fly(t).hasCls("my-header-checkbox")) {
var msg = "The checkbox of the {0} is {1}";

console.log(Ext.String.format(msg, column.id, t.checked ? "checked" : "unchecked"));
}
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column
ID="Column1"
runat="server"
Text="Test1"
DataIndex="test1">
<RenderTpl runat="server">
<Html>
<div id="{id}-titleEl" {tipMarkup}class="x-column-header-inner">
<span id="{id}-textEl" class="x-column-header-text">
<input id="my-header-checkbox-{id}" type="checkbox" class="my-header-checkbox"></input>
{text}
</span>
<tpl if="!menuDisabled">
<div id="{id}-triggerEl" class="x-column-header-trigger"></div>
</tpl>
</div>
{%this.renderContainer(out,values)%}
</Html>
</RenderTpl>
<CustomConfig>
<ext:ConfigItem Name="onElClick" Value="myOnElClick" Mode="Raw" />
</CustomConfig>
</ext:Column>

<ext:Column
ID="Column2"
runat="server"
Text="Test2"
DataIndex="test2" />

<ext:Column
ID="Column3"
runat="server"
Text="Test3"
DataIndex="test3" />
</Columns>
<Listeners>
<HeaderClick Fn="onHeaderClick" />
</Listeners>
</ColumnModel>
</ext:GridPanel>
</body>
</html>

RCM
Aug 24, 2012, 4:42 PM
Hi,
I am having a issue while trying to follow your implementation. The column header is not rendering as expected. see sample below, click the reconfigure button. see image of rendering as well. please advise where i might be going wrong.



4679





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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
<script type="text/javascript" src="scripts/MyProxy.js"></script>
<script type="text/javascript">
var getData = function (operation) {
var start = operation.start,
limit = operation.limit,
date = new Date(),
i,
data = [];

for (i = start + 1; i <= start + limit; i++) {
data.push({
test1: "Company " + i,
test2: parseInt(Math.random() * 200),
LastUpdate: date
});
}

return {
data: data,
total: 200
};
};

var myOnElClick = function (e, t) {
var me = this,
ownerHeaderCt = me.getOwnerHeaderCt();

if (ownerHeaderCt && !ownerHeaderCt.ddLock) {
if (me.triggerEl && (e.target === me.triggerEl.dom || t === me.triggerEl.dom || e.within(me.triggerEl))) {
ownerHeaderCt.onHeaderTriggerClick(me, e, t);
} else {
if (e.getKey() || (!me.isOnLeftEdge(e) && !me.isOnRightEdge(e))) {
if (!Ext.fly(t).hasCls("my-header-checkbox")) {
me.toggleSortState();
}

ownerHeaderCt.onHeaderClick(me, e, t);
}
}
}
};

var myProxyConfig = {
type: 'myproxy',
onReadData: getData,
reader: {
type: 'json',
root: 'data',
totalProperty: 'total'
}
};

var reconfigureGrid = function () {
var grid = Ext.getCmp("GridPanel1"),
store,
columns;

store = new Ext.data.JsonStore({
remoteSort: true,
buffered: true,
pageSize: "100",
fields: [{ name: "test1" }, { name: "test2"}],
showWarningOnFailure: false,
proxy: myProxyConfig
});

columns = [{
dataIndex: "test1",
text: "Test1",
xtype: "checkcolumn",
onElClick: "myOnElClick",
renderTpl: "Ext.create(\"Ext.net.XTemplate\",{html:[<div id=\"{id}-titleEl\" {tipMarkup}class=\"x-column-header-inner\"> <span id=\"{id}-textEl\" class=\"x-column-header-text\"><input id=\"my-header-checkbox-{id}\" type=\"checkbox\" class=\"my-header-checkbox\"></input>{text} </span> <tpl if=\"!menuDisabled\"> <div id=\"{id}-triggerEl\" class=\"x-column-header-trigger\"></div> </tpl> </div>]}"

}, {
dataIndex: "test2",
text: "Test2"
}];

store.trailingBufferZone = 25;
store.leadingBufferZone = 0;

grid.reconfigure(store, columns);

grid.filters.clearFilters();
grid.filters.addFilter({ type: 'string', dataIndex: 'test1' });
grid.filters.addFilter({ type: 'string', dataIndex: 'test2' });

store.loadPage(1);
};

</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" Width="500" Height="500" DisableSelection="true"
Title="Stock Price">
<TopBar>
<ext:Toolbar runat ="server">
<Items>
<ext:Button runat ="server" Text = "reconfgure">
<Listeners>
<Click Handler="reconfigureGrid();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store runat="server" Buffered="true" PageSize="100">
<CustomConfig>
<ext:ConfigItem Name="proxy" Value="myProxyConfig" Mode="Raw" />
</CustomConfig>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Company" />
<ext:ModelField Name="Price" />
<ext:ModelField Name="LastUpdate" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:RowNumbererColumn runat="server" Width="50" Sortable="false" />
<ext:Column runat="server" Text="Company" DataIndex="Company" Flex="1" />
<ext:Column runat="server" Text="Price, $" DataIndex="Price" Width="70" Align="Center" />
<ext:Column runat="server" Text="Last Update" DataIndex="LastUpdate" Width="140">
<Renderer Format="Date" FormatArgs="'n/j/Y g:i:s A'" />
</ext:Column>
</Columns>
</ColumnModel>
<Features>
<ext:GridFilters runat="server" ID="gridFiltersGridView"
AutoDataBind="true">
<Filters>
</Filters>
</ext:GridFilters>
</Features>
<View>
<ext:GridView runat="server" TrackOver="false" />
</View>
<Listeners>

</Listeners>
</ext:GridPanel>
</form>
</body>
</html>

RCM
Aug 24, 2012, 4:48 PM
hi,

Please ignore my previous post, I relaized i never needed the
Ext.create(\"Ext.net.XTemplate\",{html:[.

RCM
Aug 24, 2012, 4:58 PM
hi,

I am getting an error that object does not support property or method call when i clicked the checkbox in the header.. see sample.




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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
<script type="text/javascript" src="scripts/MyProxy.js"></script>
<script type="text/javascript">
var getData = function (operation) {
var start = operation.start,
limit = operation.limit,
date = new Date(),
i,
data = [];

for (i = start + 1; i <= start + limit; i++) {
data.push({
test1: "Company " + i,
test2: parseInt(Math.random() * 200),
LastUpdate: date
});
}

return {
data: data,
total: 200
};
};

var myOnElClick = function (e, t) {
var me = this,
ownerHeaderCt = me.getOwnerHeaderCt();

if (ownerHeaderCt && !ownerHeaderCt.ddLock) {
if (me.triggerEl && (e.target === me.triggerEl.dom || t === me.triggerEl.dom || e.within(me.triggerEl))) {
ownerHeaderCt.onHeaderTriggerClick(me, e, t);
} else {
if (e.getKey() || (!me.isOnLeftEdge(e) && !me.isOnRightEdge(e))) {
if (!Ext.fly(t).hasCls("my-header-checkbox")) {
me.toggleSortState();
}

ownerHeaderCt.onHeaderClick(me, e, t);
}
}
}
};

var onHeaderClick = function (ct, column, e, t) {
if (Ext.fly(t).hasCls("my-header-checkbox")) {
var msg = "The checkbox of the {0} is {1}";

alert(Ext.String.format(msg, column.id, t.checked ? "checked" : "unchecked"));
}
};

var myProxyConfig = {
type: 'myproxy',
onReadData: getData,
reader: {
type: 'json',
root: 'data',
totalProperty: 'total'
}
};

var reconfigureGrid = function () {
var grid = Ext.getCmp("GridPanel1"),
store,
columns;

store = new Ext.data.JsonStore({
remoteSort: true,
buffered: true,
pageSize: "100",
fields: [{ name: "test1" }, { name: "test2"}],
showWarningOnFailure: false,
proxy: myProxyConfig
});

columns = [{
dataIndex: "test1",
text: "Test1",
xtype: "checkcolumn",
onElClick: "myOnElClick",
renderTpl: "<div id=\"{id}-titleEl\" {tipMarkup}class=\"x-column-header-inner\"> <span id=\"{id}-textEl\" class=\"x-column-header-text\"><input id=\"my-header-checkbox-{id}\" type=\"checkbox\" class=\"my-header-checkbox\"></input>{text} </span> <tpl if=\"!menuDisabled\"> <div id=\"{id}-triggerEl\" class=\"x-column-header-trigger\"></div> </tpl> </div>"

}, {
dataIndex: "test2",
text: "Test2"
}];

store.trailingBufferZone = 25;
store.leadingBufferZone = 0;

grid.reconfigure(store, columns);

grid.filters.clearFilters();
grid.filters.addFilter({ type: 'string', dataIndex: 'test1' });
grid.filters.addFilter({ type: 'string', dataIndex: 'test2' });

store.loadPage(1);
};

</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" Width="500" Height="500" DisableSelection="true"
Title="Stock Price">
<TopBar>
<ext:Toolbar runat ="server">
<Items>
<ext:Button runat ="server" Text = "reconfgure">
<Listeners>
<Click Handler="reconfigureGrid();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store runat="server" Buffered="true" PageSize="100">
<CustomConfig>
<ext:ConfigItem Name="proxy" Value="myProxyConfig" Mode="Raw" />
</CustomConfig>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Company" />
<ext:ModelField Name="Price" />
<ext:ModelField Name="LastUpdate" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:RowNumbererColumn runat="server" Width="50" Sortable="false" />
<ext:Column runat="server" Text="Company" DataIndex="Company" Flex="1" />
<ext:Column runat="server" Text="Price, $" DataIndex="Price" Width="70" Align="Center" />
<ext:Column runat="server" Text="Last Update" DataIndex="LastUpdate" Width="140">
<Renderer Format="Date" FormatArgs="'n/j/Y g:i:s A'" />
</ext:Column>
</Columns>
<Listeners>
<HeaderClick Fn="onHeaderClick" />
</Listeners>
</ColumnModel>
<Features>
<ext:GridFilters runat="server" ID="gridFiltersGridView"
AutoDataBind="true">
<Filters>
</Filters>
</ext:GridFilters>
</Features>
<View>
<ext:GridView runat="server" TrackOver="false" />
</View>
</ext:GridPanel>
</form>
</body>
</html>

RCM
Aug 25, 2012, 12:49 AM
please mark as closed.