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 to build your test cases:

- Tips for creating simplified code samples
- More Information Required
- Forum Guidelines

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.