Hello!
We are working on this.
Here is a sample code.
But it needs to fully test it before adding to the toolkit.
You could use it and any feedback would be really appreciated.
Example
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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.ux.tree.ColumnNodeUI.override({
renderElements: function(n, a, targetNode, bulkRender) {
this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
var t = n.getOwnerTree(),
cols = t.columns,
bw = t.borderWidth,
c = cols[0],
cb = Ext.isBoolean(a.checked);
var buf = [
'<li class="x-tree-node"><div ext:tree-node-id="', n.id, '" class="x-tree-node-el x-tree-node-leaf ', a.cls, '">',
'<div class="x-tree-col" style="width:', c.width - bw, 'px;">',
'<span class="x-tree-node-indent">', this.indentMarkup, "</span>",
'<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',
'<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon', (a.icon ? " x-tree-node-inline-icon" : ""), (a.iconCls ? " " + a.iconCls : ""), '" unselectable="on">',
cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
'<a hidefocus="on" class="x-tree-node-anchor" href="', a.href ? a.href : "#", '" tabIndex="1" ',
a.hrefTarget ? ' target="' + a.hrefTarget + '"' : "", '>',
'<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]), "</span></a>",
"</div>"
];
for (var i = 1, len = cols.length; i < len; i++) {
c = cols[i];
buf.push('<div class="x-tree-col ', (c.cls ? c.cls : ''), '" style="width:', c.width - bw, 'px;">',
'<div class="x-tree-col-text">', (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]), "</div>",
"</div>");
}
buf.push(
'<div class="x-clear"></div></div>',
'<ul class="x-tree-node-ct" style="display:none;"></ul>',
"</li>");
if (bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()) {
this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
n.nextSibling.ui.getEl(), buf.join(""));
} else {
this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
}
this.elNode = this.wrap.childNodes[0];
this.ctNode = this.wrap.childNodes[1];
var cs = this.elNode.firstChild.childNodes;
this.indentNode = cs[0];
this.ecNode = cs[1];
this.iconNode = cs[2];
var index = 3;
if (cb) {
this.checkbox = cs[3];
// fix for IE6
this.checkbox.defaultChecked = this.checkbox.checked;
index++;
}
this.anchor = cs[index];
this.textNode = cs[index].firstChild;
}
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:ColumnTree
ID="ColumnTree1"
runat="server"
RootVisible="false"
Title="Text ColumnTree"
Width="350">
<Columns>
<ext:ColumnTreeColumn Header="Test" DataIndex="test" Width="200" />
<ext:ColumnTreeColumn Header="Test2" DataIndex="test2" Width="100" />
</Columns>
<Loader>
<ext:TreeLoader>
<UIProviders>
<ext:TreeNodeUIProvider Alias="col" ClassName="<%# ColumnTree.ColumnNodeUI %>" AutoDataBind="true" />
</UIProviders>
</ext:TreeLoader>
</Loader>
<Root>
<ext:TreeNode Text="test">
<Nodes>
<ext:TreeNode
NodeID="TreeNode1"
UIProvider="col"
Leaf="true"
Text="Leaf"
Checked="True">
<CustomAttributes>
<ext:ConfigItem Name="test" Value="test" Mode="Value" />
<ext:ConfigItem Name="test2" Value="test2" Mode="Value" />
</CustomAttributes>
<Listeners>
<CheckChange Handler="alert('CheckChange event. NodeID: ' + this.id + ', Checked: ' + checked)" />
</Listeners>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Root>
<Buttons>
<ext:Button runat="server" Text="isChecked method">
<Listeners>
<Click Handler="alert(#{ColumnTree1}.getNodeById('TreeNode1').getUI().isChecked())" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="toggleCheck method">
<Listeners>
<Click Handler="#{ColumnTree1}.getNodeById('TreeNode1').getUI().toggleCheck()" />
</Listeners>
</ext:Button>
</Buttons>
</ext:ColumnTree>
</form>
</body>
</html>
To apply it to your ColumnTree please just add it to the <head> of your page.
Example
<ext:ResourcePlaceHolder runat="server" />
<script type="text/javascript">
Ext.ux.tree.ColumnNodeUI.override({
renderElements: function(n, a, targetNode, bulkRender) {
this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
var t = n.getOwnerTree();
var cols = t.columns;
var bw = t.borderWidth;
var c = cols[0];
var cb = Ext.isBoolean(a.checked);
var buf = [
'<li class="x-tree-node"><div ext:tree-node-id="', n.id, '" class="x-tree-node-el x-tree-node-leaf ', a.cls, '">',
'<div class="x-tree-col" style="width:', c.width - bw, 'px;">',
'<span class="x-tree-node-indent">', this.indentMarkup, "</span>",
'<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',
'<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon', (a.icon ? " x-tree-node-inline-icon" : ""), (a.iconCls ? " " + a.iconCls : ""), '" unselectable="on">',
cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
'<a hidefocus="on" class="x-tree-node-anchor" href="', a.href ? a.href : "#", '" tabIndex="1" ',
a.hrefTarget ? ' target="' + a.hrefTarget + '"' : "", '>',
'<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]), "</span></a>",
"</div>"
];
for (var i = 1, len = cols.length; i < len; i++) {
c = cols[i];
buf.push('<div class="x-tree-col ', (c.cls ? c.cls : ''), '" style="width:', c.width - bw, 'px;">',
'<div class="x-tree-col-text">', (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]), "</div>",
"</div>");
}
buf.push(
'<div class="x-clear"></div></div>',
'<ul class="x-tree-node-ct" style="display:none;"></ul>',
"</li>");
if (bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()) {
this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
n.nextSibling.ui.getEl(), buf.join(""));
} else {
this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
}
this.elNode = this.wrap.childNodes[0];
this.ctNode = this.wrap.childNodes[1];
var cs = this.elNode.firstChild.childNodes;
this.indentNode = cs[0];
this.ecNode = cs[1];
this.iconNode = cs[2];
var index = 3;
if (cb) {
this.checkbox = cs[3];
// fix for IE6
this.checkbox.defaultChecked = this.checkbox.checked;
index++;
}
this.anchor = cs[index];
this.textNode = cs[index].firstChild;
}
});
</script>
