[CLOSED] Using expandPath and node selection for TreeGrid implementation with Direct method

  1. #1

    [CLOSED] Using expandPath and node selection for TreeGrid implementation with Direct method

    Hi

    We have implemented the TreeGrid with direct method. Please see this tread (http://forums.ext.net/showthread.php...918#post124918) for design and changes suggested.

    In this implantation, we want to expand particular nodes path and that node to be selected when grid loads.
    For this we have used the 'AfterRender' event to expand path and select the node.
    But it is not working for nodes that are added on demand. While works for node which are not on demand.

    We need to expand the path of last leaf node in the hierarchy and selection of the same.

    Here is the code used in 'AfterRender' function -
     var SelectFirstNode = function () {
                App.TreeGridId.expandPath("/0/1/11/1111/1112");
                var nodeToexpand = App.TreeGridId.getStore().getNodeById("1112");
                App.TreeGridId.getSelectionModel().select(nodeToexpand);
            }
    Here are complete code for your reference.
    controller code -

     [DirectController(GenerateProxyForOtherControllers = true, IDMode = DirectMethodProxyIDMode.None)]
        public class ExtNetController : Controller
        {
    
            public ActionResult ProxyTree()
            {
                NodeCollection nodes = new NodeCollection();
                Node node = new Node();
                node.NodeID = "1000";
                node.Text = "FirstNode";
                node.AttributesObject = new { nodeText = node.Text, iconHtml = "<img src='iconImage.png' width='15' height='15' />" };
                nodes.Add(node);
    
                Node childnode1 = new Node();
                childnode1.NodeID = "1";
                childnode1.Text = "Node 1";
                childnode1.Expanded = false;
                childnode1.AttributesObject = new { nodeText = "Node 1", iconHtml = "<img src='iconImage.png' width='15' height='15' />" };
                node.Children.Add(childnode1);
    
    
                Node childDummyNode1 = new Node();
                childDummyNode1.NodeID = "11";
                childDummyNode1.Text = "Node 11";
                childDummyNode1.Expanded = false;
                childDummyNode1.AttributesObject = new { nodeText = "Node 11", iconHtml = "<img src='iconImage.png' width='15' height='15' />" };
                childnode1.Children.Add(childDummyNode1);
    
                Node childDummyNode12 = new Node();
                childDummyNode12.NodeID = "12";
                childDummyNode12.Text = "Node 12";
                childDummyNode12.Expanded = false;
                childDummyNode12.AttributesObject = new { nodeText = "Node 12", iconHtml = "<img src='iconImage.png' width='15' height='15' />" };
                childnode1.Children.Add(childDummyNode12);
    
                // second node
    
                Node childnode2 = new Node();
                childnode2.NodeID = "2";
                childnode2.Text = "Node 2";
                childnode2.Expanded = false;
                childnode2.AttributesObject = new { nodeText = "Node 2", iconHtml = "<img src='iconImage.png' width='15' height='15' />" };
                node.Children.Add(childnode2);
    
                Node childnode3 = new Node();
                childnode3.NodeID = "3";
                childnode3.Text = "Node 3";
                childnode3.Expanded = false;
                childnode3.AttributesObject = new { nodeText = "Node 3", iconHtml = "<img src='iconImage.png' width='15' height='15' />" };
                node.Children.Add(childnode3);
    
                return View(nodes);
            }
    
            [DirectMethod]
            public ActionResult LoadChildNodes(string nodeId)
            {
                NodeCollection nodes = new Ext.Net.NodeCollection();
    
                if (nodeId == "11")
                {
                    nodes.Add(new Node() { NodeID = "1111", Text = "ChildNodeText1", AttributesObject = new { nodeText = "ChildNodeText1", iconHtml = "<img src='iconImage.png' width='15' height='15' />" } });
                    nodes.Add(new Node() { Leaf = true, NodeID = "1112", Text = "ChildNodeText2", AttributesObject = new { nodeText = "ChildNodeText2", iconHtml = "<img src='iconImage.png' width='15' height='15' />" } });
                }
    
                if (nodeId == "12")
                {
                    nodes.Add(new Node() { NodeID = "1121", Text = "ChildNodeText1", AttributesObject = new { nodeText = "ChildNodeText1", iconHtml = "<img src='iconImage.png' width='15' height='15' />" } });
                    nodes.Add(new Node() { Leaf = true, NodeID = "1122", Text = "ChildNodeText2", AttributesObject = new { nodeText = "ChildNodeText2", iconHtml = "<img src='iconImage.png' width='15' height='15' />" } });
                }
    
                if (nodeId == "1111")
                {
                    nodes.Add(new Node() { Leaf = true, NodeID = "1112", Text = "ChildNodeText2", AttributesObject = new { nodeText = "ChildNodeText2", iconHtml = "<img src='iconImage.png' width='15' height='15' />" } });
                }
    
                if (nodeId == "1121")
                {
                    nodes.Add(new Node() { Leaf = true, NodeID = "1122", Text = "ChildNodeText2", AttributesObject = new { nodeText = "ChildNodeText2", iconHtml = "<img src='iconImage.png' width='15' height='15' />" } });
                }
    
    
                if (nodeId == "1000")
                {
                    return this.Direct(new Ext.Net.NodeCollection());
                }
                else
                {
                    return this.Direct(nodes);
                }
            }
    }
    View Code -
    @model NodeCollection
    <html>
    <style>
        .no-node-icon img.x-tree-icon {
            display: none;
        }
    </style>
    
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>ProxyTree</title>
        <script type="text/javascript">
            var displayIcons = function (value, meta, record, index) {
                return Ext.String.format(record.data.iconHtml);
            };
    
            var LoadNodes = function (store, operation, options) {
                var node = operation.node;
                App.direct.LoadChildNodes(node.getId(), {
                    success: function (result) {
                        if (result.length > 0) {
                            node.set('loading', false);
                            node.set('loaded', true);
                            node.removeAll();
                            node.appendChild(result);
                            node.expand();
                        }
                    },
                    eventMask: {
                        showMask: true,
                        minDelay: 500
                    },
                    failure: function (errorMsg) {
                        Ext.Msg.alert('Failure', errorMsg);
                    }
                });
                return false;
            }
    
            var PreventDefaultRequest = function (store, operation, options) {
                return false;
            }
    
            var ShowDetails = function (id, text) {
            }
    
            var SelectFirstNode = function () {
                App.TreeGridId.expandPath("/0/1/11/1111/1112");
                var nodeToexpand = App.TreeGridId.getStore().getNodeById("1112");
                App.TreeGridId.getSelectionModel().select(nodeToexpand);
            }
    
        </script>
    </head>
    <body>
        <div>
            @Html.X().ResourceManager()
            @(Html.X().Container().ID("TreeGrid").Height(400).Items(
            Html.X().TreePanel().ID("TreeGridId").Header(false)
            .RootVisible(false)
            .HideHeaders(true)
            .Icon(Icon.None)
            .UseArrows(true)
            .Cls("no-node-icon")
            .Fields(
                    Html.X().ModelField().Name("nodeText"),
                    Html.X().ModelField().Name("iconHtml").Type(ModelFieldType.String)
            )
            .ColumnModel(
                    Html.X().Column().Align(Alignment.Right).DataIndex("iconHtml").Renderer("displayIcons").Width(75),
                    Html.X().TreeColumn().DataIndex("nodeText").Width(280)
            )
            .Root(Html.X().Node().NodeID("0").Text("All Notes").Children(Model[0].Children))
              .Listeners(l =>
            {
                l.ItemClick.Handler = "ShowDetails(record.data.id, record.data.text)";
            })
            .Listeners(ls => ls.AfterRender.Fn = "SelectFirstNode")
            .Listeners(x => x.BeforeLoad.Fn = "LoadNodes")
        )
    )
        </div>
    </body>
    </html>
    Please suggest the correct event and the way to expand node with id 11 till its last leaf node id '1112' and selection of the same as per above code sample.

    Thanks
    Last edited by Daniil; Mar 03, 2014 at 6:31 AM. Reason: [CLOSED]
  2. #2
    Hi @alscg,

    This is called too early:
    App.TreeGridId.getSelectionModel().select(nodeToexpand);
    The node is not loaded yet.

    It should be called in an expandPath's callback.
    http://docs.sencha.com/extjs/4.2.1/#...hod-expandPath

    But a callback is not executed in your scenario. It looks a bug. I am investigating why.
  3. #3
    Not a bug. Just there is no a real Load operation, because false returned form a BeforeLoad listener.

    Ok, I can suggest the following solution.
    var LoadNodes = function (store, operation, options) {
        var node = operation.node;
    
        App.direct.LoadChildNodes(node.getId(), {
            success: function (result) {
                if (result.length > 0) {
                    node.set('loading', false);
                    node.set('loaded', true);
                    node.removeAll();
                    node.appendChild(result);
                    node.expand();
    
                    Ext.Array.each(result, function(node) {
                        if (node.id === App.TreeGridId.nodeIdToSelect) {
                            App.TreeGridId.getSelectionModel().select(App.TreeGridId.store.getNodeById(App.TreeGridId.nodeIdToSelect));
                            delete App.TreeGridId.nodeIdToSelect;
                        }
                    });
                }
            },
            eventMask: {
                showMask: true,
                minDelay: 500
            },
            failure: function (errorMsg) {
                Ext.Msg.alert('Failure', errorMsg);
            }
        });
    
        return false;
    };
     
    var SelectFirstNode = function () {
        App.TreeGridId.nodeIdToSelect = "1112";
        App.TreeGridId.expandPath("/0/1/11/1111/1112");
    };
  4. #4
    Quote Originally Posted by Daniil View Post
    Not a bug. Just there is no a real Load operation, because false returned form a BeforeLoad listener.

    Ok, I can suggest the following solution.
    var LoadNodes = function (store, operation, options) {
        var node = operation.node;
    
        App.direct.LoadChildNodes(node.getId(), {
            success: function (result) {
                if (result.length > 0) {
                    node.set('loading', false);
                    node.set('loaded', true);
                    node.removeAll();
                    node.appendChild(result);
                    node.expand();
    
                    Ext.Array.each(result, function(node) {
                        if (node.id === App.TreeGridId.nodeIdToSelect) {
                            App.TreeGridId.getSelectionModel().select(App.TreeGridId.store.getNodeById(App.TreeGridId.nodeIdToSelect));
                            delete App.TreeGridId.nodeIdToSelect;
                        }
                    });
                }
            },
            eventMask: {
                showMask: true,
                minDelay: 500
            },
            failure: function (errorMsg) {
                Ext.Msg.alert('Failure', errorMsg);
            }
        });
    
        return false;
    };
     
    var SelectFirstNode = function () {
        App.TreeGridId.nodeIdToSelect = "1112";
        App.TreeGridId.expandPath("/0/1/11/1111/1112");
    };
    Hi Daniil,

    Thanks for providing solution, this solves the problem of selecting node by providing delay.
    Actually i had two problems (you might missed one) so one (node selection) has solved by the fix given by you and second one is here -

    We have used the code
     App.TreeGridId.expandPath("/0/1/11/1111/1112");
    and expectation with this, is it should expand the node with id '1111' but it is not expanding it.
    See the image attached - Click image for larger version. 

Name:	ExpandNode.png 
Views:	3 
Size:	5.7 KB 
ID:	7630

    But selects the correct node, to see this when we expand node '1111' manually it shows selection for node '1112'.
    Click image for larger version. 

Name:	ExpandNode1.png 
Views:	2 
Size:	6.1 KB 
ID:	7631

    Could you please suggest the solution to expand the target node that is '1111' using code
     App.TreeGridId.expandPath("/0/1/11/1111/1112");
    If i repeat this line of code then it gets expanded, but i know it is not the right way.
     App.TreeGridId.expandPath("/0/1/11/1111/1112");
    App.TreeGridId.expandPath("/0/1/11/1111/1112");
    Here are modified complete code - note that node id '1112' is now '1221' just to avoid duplicate node ids.
    Controller Code (only node id change) -
        [DirectController(GenerateProxyForOtherControllers = true, IDMode = DirectMethodProxyIDMode.None)]
        public class ExtNetController : Controller
        {
    
            public ActionResult ProxyTree()
            {
                NodeCollection nodes = new NodeCollection();
                Node node = new Node();
                node.NodeID = "1000";
                node.Text = "FirstNode";
                node.AttributesObject = new { nodeText = node.Text, iconHtml = "<img src='iconImage.png' width='15' height='15' />" };
                nodes.Add(node);
    
                Node childnode1 = new Node();
                childnode1.NodeID = "1";
                childnode1.Text = "Node 1";
                childnode1.Expanded = false;
                childnode1.AttributesObject = new { nodeText = "Node 1", iconHtml = "<img src='iconImage.png' width='15' height='15' />" };
                node.Children.Add(childnode1);
    
    
                Node childDummyNode1 = new Node();
                childDummyNode1.NodeID = "11";
                childDummyNode1.Text = "Node 11";
                childDummyNode1.Expanded = false;
                childDummyNode1.AttributesObject = new { nodeText = "Node 11", iconHtml = "<img src='iconImage.png' width='15' height='15' />" };
                childnode1.Children.Add(childDummyNode1);
    
                Node childDummyNode12 = new Node();
                childDummyNode12.NodeID = "12";
                childDummyNode12.Text = "Node 12";
                childDummyNode12.Expanded = false;
                childDummyNode12.AttributesObject = new { nodeText = "Node 12", iconHtml = "<img src='iconImage.png' width='15' height='15' />" };
                childnode1.Children.Add(childDummyNode12);
    
                // second node
    
                Node childnode2 = new Node();
                childnode2.NodeID = "2";
                childnode2.Text = "Node 2";
                childnode2.Expanded = false;
                childnode2.AttributesObject = new { nodeText = "Node 2", iconHtml = "<img src='iconImage.png' width='15' height='15' />" };
                node.Children.Add(childnode2);
    
                Node childnode3 = new Node();
                childnode3.NodeID = "3";
                childnode3.Text = "Node 3";
                childnode3.Expanded = false;
                childnode3.AttributesObject = new { nodeText = "Node 3", iconHtml = "<img src='iconImage.png' width='15' height='15' />" };
                node.Children.Add(childnode3);
    
                return View(nodes);
            }
    
            [DirectMethod]
            public ActionResult LoadChildNodes(string nodeId)
            {
                NodeCollection nodes = new Ext.Net.NodeCollection();
    
                if (nodeId == "11")
                {
                    nodes.Add(new Node() { NodeID = "1111", Text = "ChildNodeText1", AttributesObject = new { nodeText = "ChildNodeText1", iconHtml = "<img src='iconImage.png' width='15' height='15' />" } });
                    nodes.Add(new Node() { Leaf = true, NodeID = "1112", Text = "ChildNodeText2", AttributesObject = new { nodeText = "ChildNodeText2", iconHtml = "<img src='iconImage.png' width='15' height='15' />" } });
                }
    
                if (nodeId == "12")
                {
                    nodes.Add(new Node() { NodeID = "1121", Text = "ChildNodeText1", AttributesObject = new { nodeText = "ChildNodeText1", iconHtml = "<img src='iconImage.png' width='15' height='15' />" } });
                    nodes.Add(new Node() { Leaf = true, NodeID = "1122", Text = "ChildNodeText2", AttributesObject = new { nodeText = "ChildNodeText2", iconHtml = "<img src='iconImage.png' width='15' height='15' />" } });
                }
    
                if (nodeId == "1111")
                {
                    nodes.Add(new Node() { Leaf = true, NodeID = "1221", Text = "ChildNodeText2", AttributesObject = new { nodeText = "ChildNodeText2", iconHtml = "<img src='iconImage.png' width='15' height='15' />" } });
                }
    
                if (nodeId == "1121")
                {
                    nodes.Add(new Node() { Leaf = true, NodeID = "1222", Text = "ChildNodeText2", AttributesObject = new { nodeText = "ChildNodeText2", iconHtml = "<img src='iconImage.png' width='15' height='15' />" } });
                }
    
    
                if (nodeId == "1000")
                {
                    return this.Direct(new Ext.Net.NodeCollection());
                }
                else
                {
                    return this.Direct(nodes);
                }
            }
    }
    View code -
    @model NodeCollection
    <html>
    <style>
        .no-node-icon img.x-tree-icon {
            display: none;
        }
    </style>
    
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>ProxyTree</title>
        <script type="text/javascript">
            var displayIcons = function (value, meta, record, index) {
                return Ext.String.format(record.data.iconHtml);
            };
    
            var LoadNodes = function (store, operation, options) {
                var node = operation.node;
                App.direct.LoadChildNodes(node.getId(), {
                    success: function (result) {
                        if (result.length > 0) {
                            node.set('loading', false);
                            node.set('loaded', true);
                            node.removeAll();
                            node.appendChild(result);
                            node.expand();
    
                            Ext.Array.each(result, function (node) {
                                if (node.id === App.TreeGridId.nodeIdToSelect) {
                                    App.TreeGridId.getSelectionModel().select(App.TreeGridId.store.getNodeById(App.TreeGridId.nodeIdToSelect));
                                    delete App.TreeGridId.nodeIdToSelect;
                                }
                            });
                        }
                    },
                    eventMask: {
                        showMask: true,
                        minDelay: 500
                    },
                    failure: function (errorMsg) {
                        Ext.Msg.alert('Failure', errorMsg);
                    }
                });
                return false;
            }
    
            var PreventDefaultRequest = function (store, operation, options) {
                return false;
            }
    
            var ShowDetails = function (id, text) {
            }
    
            var SelectFirstNode = function () {
                // -> /0/1/11/1111/1221
                App.TreeGridId.nodeIdToSelect = "1221";
                App.TreeGridId.expandPath("/0/1/11/1111/1221");
                //App.TreeGridId.expandPath("/0/1/11/1111/1221");
            }
    
        </script>
    </head>
    <body>
        <div>
            @Html.X().ResourceManager()
            @(Html.X().Container().ID("TreeGrid").Height(400).Items(
            Html.X().TreePanel().ID("TreeGridId").Header(false)
            .RootVisible(false)
            .HideHeaders(true)
            .Icon(Icon.None)
            .UseArrows(true)
            .Cls("no-node-icon")
            .Fields(
                    Html.X().ModelField().Name("nodeText"),
                    Html.X().ModelField().Name("iconHtml").Type(ModelFieldType.String)
            )
            .ColumnModel(
                    Html.X().Column().Align(Alignment.Right).DataIndex("iconHtml").Renderer("displayIcons").Width(75),
                    Html.X().TreeColumn().DataIndex("nodeText").Width(280)
            )
            .Root(Html.X().Node().NodeID("0").Text("All Notes").Children(Model[0].Children))
              .Listeners(l =>
            {
                l.ItemClick.Handler = "ShowDetails(record.data.id, record.data.text)";
            })
            .Listeners(ls => ls.AfterRender.Fn = "SelectFirstNode")
            .Listeners(x => x.BeforeLoad.Fn = "LoadNodes")
        )
    )
        </div>
    </body>
    </html>
  5. #5
    Please try this:
    var LoadNodes = function (store, operation, options) {
        var node = operation.node;
    
        node.set("loading", true);
        App.direct.LoadChildNodes(node.getId(), {
            success: function (result) {
                if (result.length > 0) {
                    node.set('loading', false);
                    node.set('loaded', true);
                    node.removeAll();
                    node.appendChild(result);
                    operation.callback();
                }
            },
            eventMask: {
                showMask: true,
                minDelay: 500
            },
            failure: function (errorMsg) {
                Ext.Msg.alert('Failure', errorMsg);
            }
        });
    
        return false;
    };
    
    var SelectFirstNode = function () {
        App.TreeGridId.expandPath("/0/1/11/1111/1221", null, null, function (success, lastNode) {
            App.TreeGridId.getSelectionModel().select(lastNode);
        });
    };
  6. #6
    Quote Originally Posted by Daniil View Post
    Please try this:
    var LoadNodes = function (store, operation, options) {
        var node = operation.node;
    
        node.set("loading", true);
        App.direct.LoadChildNodes(node.getId(), {
            success: function (result) {
                if (result.length > 0) {
                    node.set('loading', false);
                    node.set('loaded', true);
                    node.removeAll();
                    node.appendChild(result);
                    operation.callback();
                }
            },
            eventMask: {
                showMask: true,
                minDelay: 500
            },
            failure: function (errorMsg) {
                Ext.Msg.alert('Failure', errorMsg);
            }
        });
    
        return false;
    };
    
    var SelectFirstNode = function () {
        App.TreeGridId.expandPath("/0/1/11/1111/1221", null, null, function (success, lastNode) {
            App.TreeGridId.getSelectionModel().select(lastNode);
        });
    };
    Hi Daniil,

    Thanks for another fix, yes this fixes both the problems expanding path and selecting node.

    Just to confirm that we have now removed the code line (Please confirm the removal)
    node.expand();


    Added code line
    node.set("loading", true);
    Could you give me the idea why we need this line of code.

    Thanks
  7. #7
    I added this line
    operation.callback();
    It expands the node as needed. If call the expand method before that, it will break the things.

    As for this line
    node.set("loading", true);
    You can remove it. It is not required. I just forgot to remove it.
  8. #8
    Quote Originally Posted by Daniil View Post
    I added this line
    operation.callback();
    It expands the node as needed. If call the expand method before that, it will break the things.

    As for this line
    node.set("loading", true);
    You can remove it. It is not required. I just forgot to remove it.
    Hi Daniil,

    Thanks for confirmation.

Similar Threads

  1. Replies: 2
    Last Post: May 13, 2014, 8:52 AM
  2. Replies: 2
    Last Post: Nov 21, 2013, 3:44 AM
  3. [CLOSED] Output Cache issue with Direct Method / Direct Event
    By amitpareek in forum 1.x Premium Help
    Replies: 18
    Last Post: Mar 01, 2013, 5:03 AM
  4. [CLOSED] TreeGrid: clearContent() method implementation issue
    By RomualdAwessou in forum 1.x Premium Help
    Replies: 6
    Last Post: Nov 15, 2011, 5:42 AM
  5. Replies: 5
    Last Post: Oct 26, 2010, 2:20 PM

Posting Permissions