[CLOSED] TreePanel not loading nested nodes.

**RCN** · Dec 08, 2014, 6:59 PM

On version 2.x, the TreePanel loads nested nodes as expected

But on version 3.x it stopped working

It seems to be something related to TreeStore's LazyFill property, because on version 2.x, when TreeStore's LazyFill property is set to true, it behaves like on version 3.x.

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:TreePanel RootVisible="false" Title="Ext.Net" Height="300" Width="500"
        Margins="10" Border="false" runat="server">
        <Store>
            <ext:TreeStore runat="server" LazyFill="false">
                <Proxy>
                    <ext:AjaxProxy Url="/Example/LoadTreeFakeChildren">
                        <ActionMethods Read="POST" />
                        <Reader>
                            <ext:JsonReader IDProperty="ID" />
                        </Reader>
                    </ext:AjaxProxy>
                </Proxy>
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="ID" Type="Int" />
                            <ext:ModelField Name="Name" Type="String" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:TreeStore>
        </Store>
        <Root>
            <ext:Node NodeID="0" Text="Root" />
        </Root>
        <ColumnModel>
            <Columns>
                <ext:Column Text="ID" DataIndex="ID" runat="server" />
                <ext:TreeColumn Text="Name" DataIndex="Name" Flex="2" runat="server" />
            </Columns>
        </ColumnModel>
    </ext:TreePanel>
</body>
</html>

public class ExampleController : System.Web.Mvc.Controller
{
    public ActionResult Index2()
    {
        return View();
    }

    public ActionResult LoadTreeFakeChildren()
    {
        NodeCollection nodes = new NodeCollection(false);

        Node node = new Node
        {
            NodeID = 1.ToString()
        };
        node.CustomAttributes.Add(new ConfigItem { Name = "ID", Value = node.NodeID, Mode = ParameterMode.Raw });
        node.CustomAttributes.Add(new ConfigItem { Name = "Name", Value = "Ext.Net", Mode = ParameterMode.Value });
        node.CustomAttributes.Add(new ConfigItem { Name = "loaded", Value = "true", Mode = ParameterMode.Raw });
        node.CustomAttributes.Add(new ConfigItem { Name = "expanded", Value = "true", Mode = ParameterMode.Raw });
        nodes.Add(node);


        Node childNode = new Node
        {
            Leaf = true,
            NodeID = 2.ToString()
        };
        childNode.CustomAttributes.Add(new ConfigItem { Name = "ID", Value = childNode.NodeID, Mode = ParameterMode.Raw });
        childNode.CustomAttributes.Add(new ConfigItem { Name = "Name", Value = "Sencha", Mode = ParameterMode.Value });
            
        //Add child
        node.Children.Add(childNode);

        return Content(nodes.ToJson());
    }
}

**RCN** · Dec 09, 2014, 6:03 PM

To overcome the issue presented above it's necessary to remove loaded config, as shown below:

node.CustomAttributes.Add(new ConfigItem { Name = "loaded", Value = "true", Mode = ParameterMode.Raw });

public ActionResult LoadTreeFakeChildren()
{
    NodeCollection nodes = new NodeCollection(false);

    Node node = new Node
    {
        NodeID = 1.ToString()
    };
    node.CustomAttributes.Add(new ConfigItem { Name = "ID", Value = node.NodeID, Mode = ParameterMode.Raw });
    node.CustomAttributes.Add(new ConfigItem { Name = "Name", Value = "Ext.Net", Mode = ParameterMode.Value });
    node.CustomAttributes.Add(new ConfigItem { Name = "expanded", Value = "true", Mode = ParameterMode.Raw });
    nodes.Add(node);


    Node childNode = new Node
    {
        Leaf = true,
        NodeID = 2.ToString()
    };
    childNode.CustomAttributes.Add(new ConfigItem { Name = "ID", Value = childNode.NodeID, Mode = ParameterMode.Raw });
    childNode.CustomAttributes.Add(new ConfigItem { Name = "Name", Value = "Sencha", Mode = ParameterMode.Value });
    node.Children.Add(childNode);

    return Content(nodes.ToJson());
}

On version 3.x it's not possible to set that the node is loaded, because on Ext.data.TreeStore.onNodeInsert, the node is not filled if it's loaded (Line 59).

onNodeInsert: function (parent, node, index) {
    var me = this,
        refNode,
        sibling,
        storeReader,
        nodeProxy,
        nodeReader,
        reader,
        data = node.raw || node.data,
        dataRoot,
        isVisible,
        childType;

    if (me.filterFn) {
        isVisible = me.filterFn(node);
        node.set('visible', isVisible);


        if (isVisible) {
            parent.set('visible', me.filterFn(parent));
        }
    }

    me.registerNode(node, true);

    me.beginUpdate();

    if (me.isVisible(node)) {
        if (index === 0 || !node.previousSibling) {
            refNode = parent;
        } else {

            for (sibling = node.previousSibling; sibling && !sibling.get('visible') ; sibling = sibling.previousSibling);
            while (sibling.isExpanded() && sibling.lastChild) {
                sibling = sibling.lastChild;
            }
            refNode = sibling;
        }


        me.insert(me.indexOf(refNode) + 1, node);
        if (!node.isLeaf() && node.isExpanded()) {
            if (node.isLoaded()) {

                me.onNodeExpand(node, node.childNodes);
            } else if (!me.fillCount) {

                node.set('expanded', false);
                node.expand();
            }
        }
    }


    else {
        me.needsSync = me.needsSync || node.phantom || node.dirty;
    }

    if (!node.isLeaf() && !node.isLoaded() && !me.lazyFill) {

        storeReader = me.getProxy().getReader();
        nodeProxy = node.getProxy();
        nodeReader = nodeProxy ? nodeProxy.getReader() : null;


        reader = nodeReader && nodeReader.initialConfig.rootProperty ? nodeReader : storeReader;

        dataRoot = reader.getRoot(data);
        if (dataRoot) {
            childType = node.childType;
            me.fillNode(node, reader.extractData(dataRoot, childType ? {
                model: childType
            } : undefined));
        }
    }
    me.endUpdate();
}

**RCN** · Dec 09, 2014, 6:29 PM

On version 2.x, the node is filled if it's not leaf and if ThreeStore's lazyFill equals false (Line 11)

onNodeAdded: function(parent, node) {
    var me = this,
        proxy = me.getProxy(),
        reader = proxy.getReader(),
        data = node.raw || node[node.persistenceProperty],
        dataRoot;

    Ext.Array.remove(me.removed, node);
    node.join(me);
       
    if (!node.isLeaf() && !me.lazyFill) {
        dataRoot = reader.getRoot(data);
        if (dataRoot) {
            me.fillNode(node, reader.extractData(dataRoot));
            delete data[reader.root];
        }
    }

    if (me.autoSync && !me.autoSyncSuspended && (node.phantom || node.dirty)) {
        me.sync();
    }
}

**Daniil** · Dec 10, 2014, 7:57 AM

Hi Raphael,

With this

node.CustomAttributes.Add(new ConfigItem { Name = "loaded", Value = "true", Mode = ParameterMode.Raw });

I would expect that the node doesn't load its children, because it is already considered as loaded. I mean that would be expected behavior for me.

If it is different in Ext.NET v2 and ExtJS 4, I would probably say that it is rather a defect in Ext.NET v2 and ExtJS 4. Though, I guess we won't fix it for Ext.NET v2 not to introduce a breaking change.

On version 3.x it's not possible to set that the node is loaded

Could you, please, clarify what is a use-case for that? If remove

node.CustomAttributes.Add(new ConfigItem { Name = "loaded", Value = "true", Mode = ParameterMode.Raw });

then running this code in a JavaScript console

App.TreePanel1.store.getNodeById(1).get('loaded')

returns true. So, it is considered as loaded, because it loaded its children.

**RCN** · Dec 10, 2014, 11:11 AM

Take a look on the following structure:

Click image for larger version.

Name: Trp003.png
Views: 7
Size: 3.8 KB
ID: 17051

If the nodes are filtered (server-side) by name, where name contains "Ext.Net", then we get the following result:

Click image for larger version.

Name: Trp004.png
Views: 9
Size: 2.8 KB
ID: 17061

Note that "Ext.Net 2" is expandable, and if you expand it, the store will attempt to load node's records.

To prevent this behaviour it's necessary to set that the node is loaded

node.CustomAttributes.Add(new ConfigItem { Name = "loaded", Value = "true", Mode = ParameterMode.Raw });

Then, we get the following result:

Click image for larger version.

Name: Trp005.png
Views: 8
Size: 2.7 KB
ID: 17071

On version 2.x, it was possible to set that both "Ext.Net 1" and "Ext.Net 2" were loaded. I understand that i was "Over-controlling" and that it was a "mistake" of mine.

On version 3.x it's clear that i am able to set that node is loaded only if it has no child, otherwise, the child nodes will not be loaded.

Once again, thank you Daniil. Hope that this thread helps someone that got stuck on the same issue.

Thread: [CLOSED] TreePanel not loading nested nodes.

Thread Tools

Search Thread

Display

[CLOSED] TreePanel not loading nested nodes.

Similar Threads

[FIXED] Nested Loading Demo not working

[CLOSED] How to loop through TreePanel Nodes and read changes made in client side in codebehind? Nodes are added in codebehind

[CLOSED] TreePanel: prevent loading web resource 1x1 gif with many nodes

[CLOSED] TreePanel very slow at loading & expanding ~250 nodes after ajax call to get nodes

Loading Tree panel nodes from code behind

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] TreePanel not loading nested nodes.

[CLOSED] TreePanel not loading nested nodes.

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us