PDA

View Full Version : [CLOSED] Using expandPath and node selection for TreeGrid implementation with Direct method



alscg
Feb 27, 2014, 6:03 AM
Hi

We have implemented the TreeGrid with direct method. Please see this tread (http://forums.ext.net/showthread.php?28049-Exception-window-when-expanding-node-for-TreeGrid&p=124918#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(nodeToex pand);
}


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(nodeToex pand);
}

</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

Daniil
Feb 27, 2014, 8:47 AM
Hi @alscg,

This is called too early:

App.TreeGridId.getSelectionModel().select(nodeToex pand);


The node is not loaded yet.

It should be called in an expandPath's callback.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.tree.Panel-method-expandPath

But a callback is not executed in your scenario. It looks a bug. I am investigating why.

Daniil
Feb 27, 2014, 1:40 PM
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.Tree GridId.store.getNodeById(App.TreeGridId.nodeIdToSe lect));
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");
};

alscg
Feb 28, 2014, 6:13 AM
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.Tree GridId.store.getNodeById(App.TreeGridId.nodeIdToSe lect));
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 - 7630

But selects the correct node, to see this when we expand node '1111' manually it shows selection for node '1112'.
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.Tree GridId.store.getNodeById(App.TreeGridId.nodeIdToSe lect));
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>

Daniil
Feb 28, 2014, 7:24 AM
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 );
});
};

alscg
Feb 28, 2014, 9:15 AM
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

Daniil
Feb 28, 2014, 9:23 AM
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.

alscg
Mar 03, 2014, 7:24 AM
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.