Printable View
Dear Team:
We have our Web Application created and hosted with coolite 0.8 version.
Our requirement is to Integrate 2 Tree Panel, add the Items from one Tree Panel to another one (also vice versa), i am not able to find any examples for 0.8 version. Please provide me the examples if you have any ?
Hi,
Please clarify do you mean drag and drop? Something like the following?
https://examples1.ext.net/#/TreePane...Between_Trees/
Hi Daniil:
I am in need of requirement as follows, when i select a node from left side and click on ">" button the node has to moved to right side
and vice versa. Need example for 0.8 version, please don't forget.
Attachment 2029
Hi,
Example
Code:<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Coolite 0.8.X Example</title>
<script type="text/javascript">
var X = {
add: function(source, destination) {
source = source || TreePanel1;
destination = destination || TreePanel2;
var selectedNode = source.getSelectionModel().getSelectedNode();
if (selectedNode) {
destination.getRootNode().appendChild(selectedNode);
}
},
addAll: function(source, destination) {
source = source || TreePanel1;
destination = destination || TreePanel2;
destination.getRootNode().appendChild(source.getRootNode().childNodes.slice());
},
remove: function(source, destination) {
this.add(destination, source);
},
removeAll: function(source, destination) {
this.addAll(destination, source);
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ScriptManager runat="server" />
<ext:Panel runat="server" Height="200" Width="500">
<Body>
<ext:ColumnLayout runat="server" FitHeight="true">
<ext:LayoutColumn ColumnWidth="0.5">
<ext:TreePanel ID="TreePanel1" runat="server" RootVisible="false">
<Root>
<ext:TreeNode Text="Root" Expanded="true">
<Nodes>
<ext:TreeNode Text="Node1" Leaf="true" />
<ext:TreeNode Text="Node2" Leaf="true" />
<ext:TreeNode Text="Node3" Leaf="true" />
<ext:TreeNode Text="Node4" Leaf="true" />
<ext:TreeNode Text="Node5" Leaf="true" />
</Nodes>
</ext:TreeNode>
</Root>
</ext:TreePanel>
</ext:LayoutColumn>
<ext:LayoutColumn>
<ext:Panel
runat="server"
Width="35"
BodyStyle="background-color: transparent;"
Border="false">
<Body>
<ext:AnchorLayout runat="server">
<ext:Anchor Vertical="25%">
<ext:Panel runat="server" Border="false" BodyStyle="background-color: transparent;" />
</ext:Anchor>
<ext:Anchor>
<ext:Panel runat="server" Border="false" BodyStyle="padding:5px;background-color: transparent;">
<Body>
<ext:Button runat="server" Icon="ResultsetNext" StyleSpec="margin-bottom:2px;">
<Listeners>
<Click Handler="X.add();" />
</Listeners>
<ToolTips>
<ext:ToolTip runat="server" Title="Add" Html="Add Selected Node" />
</ToolTips>
</ext:Button>
<ext:Button runat="server" Icon="ResultsetLast" StyleSpec="margin-bottom:2px;">
<Listeners>
<Click Handler="X.addAll();" />
</Listeners>
<ToolTips>
<ext:ToolTip runat="server" Title="Add all" Html="Add All Nodes" />
</ToolTips>
</ext:Button>
<ext:Button runat="server" Icon="ResultsetPrevious" StyleSpec="margin-bottom:2px;">
<Listeners>
<Click Handler="X.remove(TreePanel1, TreePanel2);" />
</Listeners>
<ToolTips>
<ext:ToolTip runat="server" Title="Remove" Html="Remove Selected Node" />
</ToolTips>
</ext:Button>
<ext:Button runat="server" Icon="ResultsetFirst" StyleSpec="margin-bottom:2px;">
<Listeners>
<Click Handler="X.removeAll(TreePanel1, TreePanel2);" />
</Listeners>
<ToolTips>
<ext:ToolTip runat="server" Title="Remove all" Html="Remove All Nodes" />
</ToolTips>
</ext:Button>
</Body>
</ext:Panel>
</ext:Anchor>
</ext:AnchorLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.5">
<ext:TreePanel ID="TreePanel2" runat="server" RootVisible="false">
<Root>
<ext:TreeNode Text="Root" Expanded="true" />
</Root>
</ext:TreePanel>
</ext:LayoutColumn>
</ext:ColumnLayout>
</Body>
</ext:Panel>
</form>
</body>
</html>
Hi Daniil:
Thanks, it worked, is it possible for me to get a complete example for TreePanel, because i have to do lot of manipulations with Tree Panel, like changing the order up/down, adding/deleting a node/parent node, change the properties of the node. Save the Node values in an XML. it will be helpful if i get a complete example.
Thanks.
Hi,
Unfortunately, we have no complete TreePanel example to achieve your requirements. Also TreePanel's functionality in Coolite 0.8.x is rather restricted compared with Ext.Net 1.0.
You could convert to 0.8.x the following exampleQuote:
like changing the order up/down
https://examples1.ext.net/#/TreePane...Reorder_Nodes/
There are respective .parentNode, .childNodes, .appendChild(), .remove(), .removeChild() members of TreeNode class, seeQuote:
adding/deleting a node/parent node
http://dev.sencha.com/deploy/yui-ext....tree.TreeNode
There are respective .attributes, .setText() members of TreeNode, see the link above.Quote:
change the properties of the node
Please clarify what exactly problems do you have with this requirement?Quote:
Save the Node values in an XML.
P.S. Could you clarify why do you use 0.8.x? I would suggest you to migrate to Ext.Net 1.0.
Many-many things are easy and possible with Ext.Net 1.0. It's not so difficult to migrate but be sure, the benefits are great, see
http://forums.ext.net/showthread.php...to-Ext.Net-1.0
http://forums.ext.net/showthread.php...0-step-by-step
Most developers has already migrated to Ext.Net 1.0 and all of them is very glad.