[FIXED] [#1615] [4.7.1] NodeExpand not fire

Hi,
I can not trigger NodeExpand and NodeCollapse listeners, see my example.
Thank you

Code:

<%@ Page Language="C#" %> <!DOCTYPE html> <html> <head runat="server"> <title></title> <link href="/resources/css/examples.css" rel="stylesheet" /> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <ext:TreePanel ID="TreePanel1" runat="server" Title="My Task List" Icon="Accept" Height="400" Width="350" UseArrows="true" AutoScroll="true" Animate="true" HideHeaders="true" RootVisible="false"> <Root> <ext:Node> <Children> <ext:Node Text="To Do" Icon="Folder" Expanded="true"> <Children> <ext:Node Text="Go jogging" Leaf="true" /> <ext:Node Text="Take a nap" Leaf="true" /> <ext:Node Text="Clean house" Leaf="true" /> </Children> <Listeners> <NodeCollapse Handler="alert('col');" /> <NodeExpand Handler="alert('exp');" /> </Listeners> </ext:Node> </Children> </ext:Node> </Root> </ext:TreePanel> </form> </body> </html>

Hello @xeo4.it!

Thanks for the straightforward test case. This seems to be a double-left-over. Ext.NET didn't update the event name, that might have been left since the v1 era, and also from Ext JS, which didn't actually implement support for handling the event when the nodes are added directly to the tree panel.

I see that the events are set up, but they are kept within the Ext.data.Model representation of the node, instead of being carried out as claimed in the documentation on Ext.data.NodeInterface.

We have logged the issue under #1615 in our bugs tracking service and will post an update here as soon as we have this fixed.

Anyway, here's how you can enable it without the use of overrides.

1. Create the client-side methods to handle collapse/expand, and pull the listeners off the node

Code:

function handleItemExpand(item) { return callInnerListener(item.data, "nodeexpand"); } function handleItemCollapse(item) { return callInnerListener(item.data, "nodecollapse"); } function callInnerListener(node, event_name) { if (Ext.isObject(node.listeners)) { var listener = node.listeners[event_name]; if (Ext.isFunction(listener.fn)) { return listener.fn(node); } } return true; }

2. Wire up the methods above to their respective events in the TreePanel -- add this listeners block to the TreePanel itself.

Code:

<Listeners> <ItemExpand Fn="handleItemExpand" /> <ItemCollapse Fn="handleItemCollapse" /> </Listeners>

This way you'd have code working across versions, as far as client-side code is concerned. When server-side code (C#, Ext.NET) code comes into play, if the listeners are removed (or renamed), you'll have intellisense point the faulting code for you, then you can easily fix the client-side code as well to point to the new names.

While we thrive to keep backwards compatibility between versions, this seems to be a feature that never actually worked in Ext.NET 4 (actually I suspect this is true since version 2!), so there's not much point in keeping the event listener names when we fix the issue. We will probably just rename them to the correct ones (this depending then of the client-side code also being fixed).

The code above will also guarantee you can bind the listeners to the nodes individually, which seems to be your goal.

Well, hope this helps for the time being!

Hi Fabricio,
I have implemented your solution, and it works fine.
Thank you for your time.

Jimmy

Hello again, Jimmy!

We have tackled this issue to solve it definitively in version 4.8.0, but in the end, the listeners on nodes can't be set up at build time, because of some design constraints, so, as it can't work that way, the listeners block was actually removed from the Ext.Net.Node class instead of being fixed. Even if we used the correct names, they just get appended as data fields (as the node is but an instance/specialization of a store's model (Ext.data.Model client-side class).

A big conflict would happen, for example, if the model also had a field called listeners.

Unfortunately, the usage workaround we provided will be lost, as it was actually wrong. What I can suggest you is, create a new model field to the nodes you want special behavior with a function name (or the function body), and set up the tree panel listeners (much like done in the workaround) to interpret that field as the code to run.

Just to clarify, this is a way you could maintain the per-node specific code running. The To Do node shows a reference to an external client-side js function, while the first expandable sub-node defines an inline short function, specific to that node. There's a third expandable node with no function just showing how it would be expanded fine without any method call at run time.

Code:

<%@ Page Language="C#" %> <!DOCTYPE html> <html> <head runat="server"> <title></title> <script type="text/javascript"> function handleItemExpand(item) { return callInnerListener(item.data, "nodeexpand"); } function handleItemCollapse(item) { return callInnerListener(item.data, "nodecollapse"); } function callInnerListener(node, event_name) { if (Ext.isFunction(node.customFn)) { return node.customFn(node, event_name); } return true; } var todoFunction = function(item, event) { Ext.toast(event + " triggered in To Do."); } </script> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <ext:TreePanel ID="TreePanel1" runat="server" Title="My Task List" Icon="Accept" Height="400" Width="350" UseArrows="true" AutoScroll="true" Animate="true" HideHeaders="true" RootVisible="false"> <Root> <ext:Node> <Children> <ext:Node Text="To Do" Icon="Folder" Expanded="true" NodeID="todono"> <CustomConfig> <ext:ConfigItem Name="customFn" Value="todoFunction" Mode="Raw" /> </CustomConfig> <Children> <ext:Node Text="Function-body based"> <Children> <ext:Node Text="A side method has been run" Leaf="true" /> </Children> <CustomConfig> <ext:ConfigItem Name="customFn" Value="function (item, event) { Ext.toast(event + ' triggered with inline code.'); }" Mode="Raw" /> </CustomConfig> </ext:Node> <ext:Node Text="Trigger-nothing node"> <Children> <ext:Node Text="Nothing has been run" Leaf="true" /> </Children> </ext:Node> <ext:Node Text="Go jogging" Leaf="true" /> <ext:Node Text="Take a nap" Leaf="true" /> <ext:Node Text="Clean house" Leaf="true" /> </Children> </ext:Node> </Children> </ext:Node> </Root> <Listeners> <ItemExpand Fn="handleItemExpand" /> <ItemCollapse Fn="handleItemCollapse" /> </Listeners> </ext:TreePanel> </form> </body> </html>

Hope this helps migration of the code when you upgrade to the upcoming release! Unfortunately something will have to change regarding this feature, we couldn't help it.