PDA

View Full Version : [CLOSED] [#58] Exception thrown when adding a CommandColumn to a TreePanel



RCN
May 18, 2012, 1:42 PM
<ext:TreePanel ID="TreePanel1" runat="server" Title="Tree" RootVisible="false" Height="500"
Border="false">
<Fields>
<ext:ModelField Name="task" />
</Fields>
<ColumnModel>
<Columns>
<ext:TreeColumn ID="TreeColumn1" runat="server" Text="Task" DataIndex="task" />
<ext:Column ID="Column1" runat="server" Text="Change">
<Commands>
<ext:ImageCommand CommandName="Chart" Icon="ChartBar" />
</Commands>
</ext:Column>
</Columns>
</ColumnModel>
<Store>
<ext:TreeStore ID="TreeStore1" NodeParam="nodeId" runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/loadNodeChildren">
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
</ext:TreeStore>
</Store>
<Root>
<ext:Node NodeID="0" Text="Ext" />
</Root>
</ext:TreePanel>




public StoreResult loadNodeChildren(string nodeId)
{
NodeCollection nodes = new NodeCollection(false);

if (!string.IsNullOrEmpty(nodeId))
{
for (int i = 1; i < 6; i++)
{
Node asyncNode = new Node();
asyncNode.NodeID = nodeId + i;
asyncNode.CustomAttributes.Add(new ConfigItem { Name = "task", Value = asyncNode.NodeID, Mode = ParameterMode.Value });
nodes.Add(asyncNode);
}
}

return new StoreResult { Data = nodes.ToJson() };
}


The example above works properly but it throws an exception if i add a CommandColumn as shown bellow:



<ext:CommandColumn ID="CommandColumn1" runat="server" Width="60">
<Commands>
<ext:GridCommand Icon="Delete" CommandName="Delete" />
</Commands>
</ext:CommandColumn>


Any idea to overcome this problem?

RCN
May 18, 2012, 2:26 PM
In the first post of this thread i wrote that it works properly, but i meant that it renders properly. The command handler (as shown bellow) trows an exception. I would like to know whether there is a way to have commands inside a TreePanel.


<ext:Column ID="Column1" runat="server" Text="Change">
<Commands>
<ext:ImageCommand CommandName="Chart" Icon="ChartBar" />
</Commands>
<Listeners>
<Command Handler="alert('ext');" />
</Listeners>
</ext:Column>

Daniil
May 18, 2012, 5:27 PM
Hi,

Currently it's not supported.

For now I can suggest the following fix to get the Column Command event working.

Fix

Ext.grid.column.Column.override({
onCellCommandClick : function (view, e, target, cell, recordIndex, cellIndex) {
var cmd = Ext.fly(target).getAttributeNS("", "cmd"),
owner = this.grid || this.up("treepanel"),
store = owner.getStore(),
record = store.getAt ? store.getAt(recordIndex) : view.getRecord(view.getNode(recordIndex));

if (Ext.isEmpty(cmd, false)) {
return;
}

this.fireEvent("command", this, cmd, record, recordIndex, cellIndex);
}
});

Here is the full example.

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 v2 Example</title>

<ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

<script type="text/javascript">
Ext.grid.column.Column.override({
onCellCommandClick : function (view, e, target, cell, recordIndex, cellIndex) {
var cmd = Ext.fly(target).getAttributeNS("", "cmd"),
owner = this.grid || this.up("treepanel"),
store = owner.getStore(),
record = store.getAt ? store.getAt(recordIndex) : view.getRecord(view.getNode(recordIndex));

if (Ext.isEmpty(cmd, false)) {
return;
}

this.fireEvent("command", this, cmd, record, recordIndex, cellIndex);
}
});

var onCommand = function (item, command, record, recordIndex, cellIndex) {
var tpl = "command: {0}<br/>text: {1}<br/>recordIndex: {2}<br/>cellIndex: {3}<br/>";
msg = Ext.String.format(tpl, command, record.get("text"), recordIndex, cellIndex);

App.Label1.setText(msg, false);
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:TreePanel ID="TreePanel1" runat="server" Height="100">
<ColumnModel>
<Columns>
<ext:TreeColumn runat="server" DataIndex="text" Width="300" />
<ext:Column runat="server" DataIndex="test">
<Commands>
<ext:ImageCommand CommandName="testCommand" Icon="Accept" />
</Commands>
<Listeners>
<Command Fn="onCommand" />
</Listeners>
</ext:Column>
</Columns>
</ColumnModel>
<Root>
<ext:Node Text="Root" Expanded="true">
<Children>
<ext:Node Text="Node1" Expanded="true">
<Children>
<ext:Node Text="Node2" Leaf="true" />
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
</ext:TreePanel>

<ext:Label ID="Label1" runat="server" />
</form>
</body>
</html>

RCN
Jun 20, 2012, 7:31 PM
any update regarding this issue?

Daniil
Jun 20, 2012, 9:57 PM
Unfortunately, we have no resources at the moment to implement CommandColumn for TreePanel.

Hope to look into it later. Though I can't provide you with any time frame. Maybe, v2.1.

For now, please use ImageCommands with the suggested fix. By the way, ImageCommands are much more lightweight in the performance aspect when GridCommands.

Daniil
Sep 28, 2012, 3:21 PM
Now CommandColumn works for TreePanel in OverOnly mode.

We hope to get it working for a common mode as well.

RCN
Sep 28, 2012, 6:55 PM

Daniil
Sep 28, 2012, 7:01 PM
Thank you, Raphael. We will wait your feedback.

Daniil
Nov 20, 2012, 1:55 PM
Created an Issue to track this feature request, see:
https://github.com/extnet/Ext.NET/issues/58

RCN
Nov 20, 2012, 2:02 PM
Thank you Daniil

amida
Jul 10, 2013, 9:05 PM
hi Daniil

First i would like to thank you i had the same problem but now with your support to RCN my problem is also solved but i need the commandcolumn only to leaf nodes when i tried your code the command is displayed to all nodes. how can i fix that thank you in advance.

Baidaly
Jul 11, 2013, 1:01 AM
Hello!

Please, investigate the following sample:



<%@ 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 v2 Example</title>

<ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

<script type="text/javascript">
Ext.grid.column.Column.override({
onCellCommandClick: function (view, e, target, cell, recordIndex, cellIndex) {
var cmd = Ext.fly(target).getAttributeNS("", "cmd"),
owner = this.grid || this.up("treepanel"),
store = owner.getStore(),
record = store.getAt ? store.getAt(recordIndex) : view.getRecord(view.getNode(recordIndex));

if (Ext.isEmpty(cmd, false)) {
return;
}

this.fireEvent("command", this, cmd, record, recordIndex, cellIndex);
}
});

var onCommand = function (item, command, record, recordIndex, cellIndex) {
var tpl = "command: {0}<br/>text: {1}<br/>recordIndex: {2}<br/>cellIndex: {3}<br/>";
msg = Ext.String.format(tpl, command, record.get("text"), recordIndex, cellIndex);

App.Label1.setText(msg, false);
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:TreePanel ID="TreePanel1" runat="server" Height="100">
<ColumnModel>
<Columns>
<ext:TreeColumn runat="server" DataIndex="text" Width="300" />
<ext:Column runat="server" DataIndex="test">
<Commands>
<ext:ImageCommand CommandName="testCommand" Icon="Accept" />
</Commands>
<PrepareCommand Handler="
if (record.childNodes.length != 0) {
command.hidden = true;
command.hideMode = 'display';
}
"></PrepareCommand>
<Listeners>
<Command Fn="onCommand" />
</Listeners>
</ext:Column>
</Columns>
</ColumnModel>
<Root>
<ext:Node Text="Root" Expanded="true">
<Children>
<ext:Node Text="Node1" Expanded="true">
<Children>
<ext:Node Text="Node2" Leaf="true" />
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
</ext:TreePanel>

<ext:Label ID="Label1" runat="server" />
</form>
</body>
</html>

amida
Jul 11, 2013, 7:40 AM
thank you it is working

Daniil
Aug 06, 2013, 4:58 AM
Now CommandColumn works for TreePanel in OverOnly mode.

We hope to get it working for a common mode as well.

It works in the common mode (not over only) as well since the v2.2 release.