[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 -
Code:
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 -
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 -
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
