TreePanel not populating, converting v2 --> V5

[rgraham]

We have this code in our V2 ascx markup:

<ext:Panel runat="server" Width="270" ID="mainMenuPanel" Border="false" Layout="AccordionLayout" AutoScroll="true" Region="Center">

<Items>
<ext:TreePanel
ItemID="panel-menu"
runat="server"
ID="MainPanel"
RootVisible="false" Title="Views" Border="false" Layout="FitLayout">

<SelectionModel>
<ext:TreeSelectionModel runat="server" ID="treeSelectionModel" Mode="Single" />
</SelectionModel>

<Store>
<ext:TreeStore ID="viewMenuStore" runat="server">
<Proxy>
<ext:RestProxy Url="~/api/menu/{0}" Json="true">
<ExtraParams>
<ext:Parameter Name="module" Value="Purchasing" Mode="Value" />
</ExtraParams>
</ext:RestProxy>
</Proxy>
</ext:TreeStore>
</Store>
<Root>
<ext:Node NodeID="0" Text="Root" />
</Root>
</ext:TreePanel><ext:Panel runat="server" Width="270" ID="mainMenuPanel" Border="false" Layout="AccordionLayout" AutoScroll="true" Region="Center">

<Items>
<ext:TreePanel
ItemID="panel-menu"
runat="server"
ID="MainPanel"
RootVisible="false" Title="Views" Border="false" Layout="FitLayout">

<SelectionModel>
<ext:TreeSelectionModel runat="server" ID="treeSelectionModel" Mode="Single" />
</SelectionModel>

<Store>
<ext:TreeStore ID="viewMenuStore" runat="server">
<Proxy>
<ext:RestProxy Url="~/api/menu/{0}" Json="true">
<ExtraParams>
<ext:Parameter Name="module" Value="Purchasing" Mode="Value" />
</ExtraParams>
</ext:RestProxy>
</Proxy>
</ext:TreeStore>
</Store>
<Root>
<ext:Node NodeID="0" Text="Root" />
</Root>
</ext:TreePanel>...

This is the ApiController call:

[Route("api/menu/{node}/{module}")]
[HttpGet]
public HttpResponseMessage GetNodes(string node, string module)
{
NodeCollection nodes = new NodeCollection(false);
var tree = PurchasingService.TreeBuilder(module);
tree.ToList().ForEach(d =>
{
Node node1 = CreateNewNode(d.Entity, Icon.Folder, !(d.ChildNodes != null && d.ChildNodes.Count() > 0));
if (d.ChildNodes != null)
{
CreateChildNode(d.ChildNodes, node1);
}
nodes.Add(node1);
});

var response = this.Request.CreateResponse(HttpStatusCode.OK);
response.Content = new StringContent(nodes.ToJson(), Encoding.UTF8, "application/json");
return response;

}

It returns this JSON:

[{"id":"1","iconCls":X.net.RM.getIcon("Folder"),"text":"Custom Views","children":[{"id":"1263","leaf":true,"iconCls":X.net.RM.getIcon("Star"),"text":"StatByAction"}]},

Nothing whatsoever displays. The "+" symbol in the tree changes to a hyphen, but not leafs or nodes display.

The examples I am seeing are using classic asmx web services, are there any using ApiController?

Thanks in advance.

[fabricio.murta]

Hello @rgraham, and welcome to Ext.NET forums!

We can help you with that; I'm sure every page in v2 is portable into v5, just the technology gap and some breaking changes always get in the way; usually the change, when required, is minimal.

But we'd need to be able to reproduce your scenario in our side so that we can give you proper advice. Are you willing to help us help you with that? We don't want to see your proprietary code, no! We just need simplified test cases that rebuild the scenario you're facing.

In this case, I see we'd need an ASPX page referencing the ASCX control, and a CS source to set up the API endpoint. Perhaps we may simplify this scenario down to a simple ASPX page and the API entrypoint using some fixed "mock data" so we could get down to a runnable sample with just two files (two code blocks) here?

Here, take a look at these threads, they give good advice on getting test cases done; you can also use Examples Explorers project sources (https://github.com/extnet/examples.ext.net) to build your test cases:

- Tips for creating simplified code samples (http://forums.ext.net/showthread.php?61176-Tips-for-creating-simplified-code-samples)
- More Information Required (http://forums.ext.net/showthread.php?10205-More-Information-Required)
- Forum Guidelines (http://forums.ext.net/showthread.php?3440-Forum-Guidelines-For-Posting-New-Topics)

I know it may feel boring to have to read all that, but that would help so much us help you that, especially if you're planning to rely on us to help you with your migration, I am sure it will prove totally worth the time spent reviewing them.

That said, do you think we can work up a simplified test case reproducing your scenario (please no proprietary code, just the bare scenario); so we could then tell you how exactly the approach should be changed to work in Ext.NET 5?

Looking forward to your follow-up!

[rgraham]

OK, I have the tree panels populating now. However, they are contained in a panel with layout="AccordionLayout"

When I expand or collapse any accordion header, the icon does not change and the accordion item cannot be re-collapsed or expanded.

The lack of API documentation on the event model is very frustrating. Examples only get you so far.

[geoffrey.mcgill]

Maybe a JavaScript error is being thrown. You can confirm by opening the Developer Tools and viewing the Console tab.

A proper sample demonstrating how to reproduce the issue would help us troubleshoot further.

Client side docs are available at https://docs.sencha.com/extjs/7.0.0/classic/Ext.html.

[rgraham]

Producing a sample of a problem in version migration is nearly impossible without sending the whole application. Pasting the relevant code into a *new* application while hiding all the other code helps nobody.

I am using the developer tools, but many of the errors point to unintelligble code in ext.axd.

[geoffrey.mcgill]

Setting ScriptMode="Debug" on your Ext.NET ResourceManager will output the -debug version of the .js files which should help the browser Developer Tools to point to a specific line.

Hope this helps.

[rgraham]

HI, and thank you for the tip about turning on ScriptMode="Debug"

I see that there is an error saying "Layout run failed" after I click on any accordion header. After this happens once for each header in the accordion panel it no longer responds to any clicks, and the icon never swaps back and forth between hyphen and plus symbol.

I cannot reproduce this in a sample. Any sample I create works fine.

If I paste in a working copy of the Accordion and tree panel from the ext.net examples, I still get the same error, so something higher up in the hierarchy is breaking the accordion.

I know this doesn't give you a lot to go on, but if you can imagine any property above here that would break the accordion like this please let me know!

[geoffrey.mcgill]

If I paste in a working copy of the Accordion and tree panel from the ext.net examples, I still get the same error

Which sample from the Examples Explorer are you testing? this one?
https://examples5.ext.net/#/Layout/Accordion/Basic_in_Markup/

And to confirm, you copy the sample exactly as is into your local project, and it is throwing the exact same JavaScript error?

[rgraham]

I removed all the html from my ascx user control, and pasted this from your example:


<h1>Accordion Layout in Markup</h1>

<ext:Panel runat="server" Width="250" Height="400" BodyBorder="0" Layout="Accordion">
<%--<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Icon="Connect">
<ToolTips>
<ext:ToolTip
runat="server"
Title="Rich ToolTips"
Html="Let your users know what they can do!" />
</ToolTips>
</ext:Button>
<ext:Button ID="Button2" runat="server" Icon="UserAdd" />
<ext:Button ID="Button3" runat="server" Icon="UserDelete" />
</Items>
</ext:Toolbar>
</TopBar>--%>
<Items>
<ext:TreePanel runat="server" Title="Online Users" RootVisible="false">
<Tools>
<ext:Tool Type="Refresh" Handler="Ext.Msg.alert('Message','Refresh Tool Clicked!');" />
</Tools>
<Root>
<ext:Node Text="Root">
<Children>
<ext:Node Text="Friends" Expanded="true">
<Children>
<ext:Node Text="George" Icon="User" Leaf="True" />
<ext:Node Text="Brian" Icon="User" Leaf="True" />
<ext:Node Text="Jon" Icon="User" Leaf="True" />
<ext:Node Text="Tim" Icon="User" Leaf="True" />
<ext:Node Text="Brent" Icon="User" Leaf="True" />
<ext:Node Text="Fred" Icon="User" Leaf="True" />
<ext:Node Text="Bob" Icon="User" Leaf="True" />
</Children>
</ext:Node>
<ext:Node Text="Family" Expanded="true">
<Children>
<ext:Node Text="Kelly" Icon="UserFemale" Leaf="True" />
<ext:Node Text="Sara" Icon="UserFemale" Leaf="True" />
<ext:Node Text="Zack" Icon="UserGreen" Leaf="True" />
<ext:Node Text="John" Icon="UserGreen" Leaf="True" />
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
</ext:TreePanel>
<ext:Panel runat="server" Title="Settings" />
<ext:Panel runat="server" Title="Even More Stuff" />
<ext:Panel runat="server" Title="My Stuff" />
</Items>
</ext:Panel>

And I get the same error.

[geoffrey.mcgill]

Can you post a sample demonstrating how this ascx is being included?

Including the <h1> tag at the top seems suspicious, but would depend on how you're including the ascx in the parent page.


<h1>Accordion Layout in Markup</h1>

[rgraham]

I redid that in a hurry to reply to your post.

I did it without the H1 tag originally.