[CLOSED] Append a fully loaded child in a remote TreePanel

Hi folks, i have a TreePanel that uses an AjaxProxy to perform the load of child nodes. It works perfectly but i have a scenario that i need to append a "fully" loaded node.

In the example bellow when the _btnAppendSubTree Button is clicked a node with three levels is loaded. but when i expand the it, the load of sub-items is performed, but i just want to show the item previously loaded.

In version 1.x of Ext.Net i could set whether nodes were async by instantiate it as Node or AsyncNode. Is there any way to inform that the node is not async?

1 - View

Code:

---

<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Button ID="_btnAppendSubTree" runat="server" Text="Append Sub Tree">
    <Listeners>
        <Click Handler="AppendSubTree();" />
    </Listeners>
</ext:Button>
<ext:TreePanel ID="TreePanel1" runat="server" Icon="Accept" Height="300" Shadow="false"
    UseArrows="true" AutoScroll="true" Animate="true" EnableDD="true" RootVisible="false">
    <Fields>
        <ext:ModelField Name="Task" />
    </Fields>
    <ColumnModel>
        <Columns>
            <ext:TreeColumn ID="TreeColumn2" runat="server" Text="Task" DataIndex="Task" />
        </Columns>
    </ColumnModel>
    <Store>
        <ext:TreeStore ID="TreeStore1" NodeParam="nodeId" AutoLoad="true" 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="Tasks" />
    </Root>
</ext:TreePanel>

---

2 - JavaScript

Code:

---

var AppendSubTree = function () {
    Ext.net.DirectMethod.request({
        url: "/Example/AppendSubTree",
        cleanRequest: true,
        success: function (result) {
            App.TreePanel1.getRootNode().appendChild(Ext.decode(result.data));
        }
    });
}

---

3 - Controller

Code:

---

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

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

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

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

    Node no = new Node();
    no.NodeID = "sub0";
    no.CustomAttributes.Add(new ConfigItem { Name = "Task", Value = no.NodeID, Mode = ParameterMode.Value });

    nodes.Add(no);

    Node subNode1 = new Node();
    subNode1.NodeID = "sub1";
    subNode1.CustomAttributes.Add(new ConfigItem { Name = "Task", Value = subNode1.NodeID, Mode = ParameterMode.Value });
    no.Children.Add(subNode1);

    Node subNode2 = new Node();
    subNode2.NodeID = no.NodeID + "sub2";
    subNode2.CustomAttributes.Add(new ConfigItem { Name = "Task", Value = subNode2.NodeID, Mode = ParameterMode.Value });
    subNode1.Children.Add(subNode2);

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

---

It´s possible to accomplish this task by doing the following. But i think that it´s not a good approach. could someone help to improve it?

1 - JavaScript

Code:

---

var AppendSubTree = function () {
    Ext.net.DirectMethod.request({
        url: "/Example/AppendSubTree",
        cleanRequest: true,
        success: function (result) {
            var data = Ext.decode(result.data);
           
            var currentNode = App.TreePanel1.getRootNode();

            for (var indice = 0; indice < data.length; indice++) {
                var currentRecord = data[indice];

                var appendedNode = currentNode.appendChild(currentRecord, false, false);

                currentNode.expand();
                currentNode = appendedNode;
            }
            currentNode.set('leaf', true);
        }
    });
}

---

2 - Controller

Code:

---

public StoreResult AppendSubTree()
{
    NodeCollection nodes = new NodeCollection(false);

    Node no = new Node();
    no.NodeID = "sub0";
    no.CustomAttributes.Add(new ConfigItem { Name = "Task", Value = no.NodeID, Mode = ParameterMode.Value });
    no.CustomAttributes.Add(new ConfigItem { Name = "MaeID", Value = "0"    , Mode = ParameterMode.Value });

    nodes.Add(no);

    Node subNode1 = new Node();
    subNode1.NodeID = "sub1";
    subNode1.CustomAttributes.Add(new ConfigItem { Name = "Task", Value = subNode1.NodeID, Mode = ParameterMode.Value });
    subNode1.CustomAttributes.Add(new ConfigItem { Name = "MaeID", Value = no.NodeID, Mode = ParameterMode.Value });
    nodes.Add(subNode1);

    Node subNode2 = new Node();
    subNode2.NodeID = "sub2";
    subNode2.CustomAttributes.Add(new ConfigItem { Name = "Task", Value = subNode2.NodeID, Mode = ParameterMode.Value });
    subNode2.CustomAttributes.Add(new ConfigItem { Name = "MaeID", Value = subNode1.NodeID, Mode = ParameterMode.Value });
    nodes.Add(subNode2);

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

---

Hi,

A TreeStore doesn't load children for a node which is already has children.

Please don't override the Root of JsonReader when you deal with TreeStore. It should stay "children" by default.

So, please remove JsonReader.

Also TreeStore expects an array of nodes in a response without any additional prefix like "data" in your case. Respectively, please replace the loadNodeChildren action with the following one.

Code:

---

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

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

    return Content(nodes.ToJson());
}

---

Daniil, first of all i´d like to thank for your time. I like your approach but it´s hard to catch a thrown exception during the load process. I say it because the ContentResult doesn´t have a ErrorMessage, Success or Message property like AjaxResult or StoreResult. I know that i can use the Exception handler of the Store to catch the exception but the message is not well formatted.

Here is a example using AjaxResult. I prefer to use yours because you implemented it using store.

What do you think about this issue?

1 - View

Code:

---

<ext:TreePanel ID="TreePanel2" runat="server" Title="Tree" Width="300" Height="450"
    Border="false">
    <Fields>
        <ext:ModelField Name="Task" />
    </Fields>
    <ColumnModel>
        <Columns>
            <ext:TreeColumn ID="TreeColumn1" runat="server" Text="Task" DataIndex="Task" />
        </Columns>
    </ColumnModel>
    <Root>
        <ext:Node NodeID="0" Text="Root" />
    </Root>
    <Listeners>
        <BeforeLoad Fn="nodeLoad" />
    </Listeners>
</ext:TreePanel>

---

2 - JavaScript

Code:

---

var nodeLoad = function (store, operation, options) {
    var node = operation.node;
    Ext.net.DirectMethod.request({
        url: "/Example/loadNodeChildrenAbc/",
        cleanRequest: true,
        success: function (result) {
            node.set('loading', false);
            node.set('loaded', true);
            debugger;
            var data = Ext.decode(result);
            node.appendChild(data, undefined, true);
            node.expand();
        },

        failure: function (errorMsg) {
            Ext.Msg.alert('Failure', errorMsg);
        }
    });

    return false;
};

---

3 - Controller

Code:

---

public AjaxResult loadNodeChildrenAbc()
{
    AjaxResult result = new AjaxResult();

    try
    {
        string nodeId = DateTime.Now.Second.ToString();

        NodeCollection nodes = new NodeCollection(false);

        for (int indice = 1; indice < 6; indice++)
        {
            Node no = new Node();
            no.NodeID = nodeId + indice;
            no.CustomAttributes.Add(new ConfigItem { Name = "Task", Value = no.NodeID, Mode = ParameterMode.Value });
            nodes.Add(no);

            if (indice == 1)
            {
                Node subNode1 = new Node();
                subNode1.NodeID = "sub1" + nodeId;
                subNode1.CustomAttributes.Add(new ConfigItem { Name = "Task", Value = subNode1.NodeID, Mode = ParameterMode.Value });
                subNode1.CustomAttributes.Add(new ConfigItem { Name = "MaeID", Value = no.NodeID, Mode = ParameterMode.Value });
                no.Children.Add(subNode1);
            }
        }

        result.Result = nodes.ToJson();
    }
    catch (Exception ex)
    {
        result.ErrorMessage = ex.Message;
               
    }

    return result;
}

---

You can return

Code:

---

return Content(JSON.Serialize(new
{
    success = false,
    message = "error"
}));

---

from an Action and handle it the following way.

Code:

---

<ext:TreeStore runat="server" ShowWarningOnFailure="false">
    <Proxy>
        <ext:AjaxProxy Url="/Test/loadNodeChildren/">
            <Reader>
                <ext:JsonReader MessageProperty="message" />
            </Reader>
            <Listeners>
                <Exception Handler="alert(operation.getError());" />
            </Listeners>
        </ext:AjaxProxy>
    </Proxy>
</ext:TreeStore>

---