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

  1. #1

    [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
    <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
    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
    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() };
    }
    Last edited by Daniil; Jun 04, 2012 at 7:43 PM. Reason: [CLOSED]
  2. #2
    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
    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
    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() };
    }
  3. #3
    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.

    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());
    }
  4. #4
    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
    <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
    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
    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;
    }
  5. #5
    You can return
    return Content(JSON.Serialize(new
    {
        success = false,
        message = "error"
    }));
    from an Action and handle it the following way.
    <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>

Similar Threads

  1. [CLOSED] TreePanel Append node id
    By jesperhp in forum 1.x Premium Help
    Replies: 7
    Last Post: Nov 18, 2011, 6:22 AM
  2. Replies: 2
    Last Post: Apr 15, 2010, 5:33 AM
  3. Replies: 6
    Last Post: Feb 25, 2010, 7:22 PM
  4. Replies: 0
    Last Post: Dec 01, 2009, 2:45 AM
  5. Replies: 1
    Last Post: Nov 01, 2009, 6:08 AM

Tags for this Thread

Posting Permissions