Feb 23, 2016, 1:10 PM
binding a tree column value from the server during the drag and drop.
I have 2 tree panels, I will be dragging a dropping value from one tree to another tree.
The second tree will have multiple columns. The first column will have the data which is dragged from the source tree.
Please have a look at the below image:
In the image above, Business Roles comes from the source tree that is bound to the first column of the destination tree.
My requirement here is : I would want to send the 'Business Roles' to the server or database to fetch its 'Milestone Cat1' data and display it in the second column.
Note : The above image is a morphed one to make understand my requirement.
Please find the runnable test case for the same:
The second tree will have multiple columns. The first column will have the data which is dragged from the source tree.
Please have a look at the below image:
In the image above, Business Roles comes from the source tree that is bound to the first column of the destination tree.
My requirement here is : I would want to send the 'Business Roles' to the server or database to fetch its 'Milestone Cat1' data and display it in the second column.
Note : The above image is a morphed one to make understand my requirement.
Please find the runnable test case for the same:
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
SiteMapNode siteNode = SiteMap.RootNode;
Node node = this.CreateNodeWithOutChildren(siteNode);
node.AllowDrag = true;
node.Expanded = true;
TreePanel1.Root.Add(node);
}
}
//page tree node loader handler
protected void LoadPages(object sender, NodeLoadEventArgs e)
{
if (!string.IsNullOrEmpty(e.NodeID))
{
SiteMapNode siteMapNode = SiteMap.Provider.FindSiteMapNodeFromKey(e.NodeID);
if (siteMapNode == null)
{
return;
}
SiteMapNodeCollection children = siteMapNode.ChildNodes;
if (children != null && children.Count > 0)
{
foreach (SiteMapNode mapNode in siteMapNode.ChildNodes)
{
e.Nodes.Add(this.CreateNodeWithOutChildren(mapNode));
}
}
}
}
//dynamic node creation
private Node CreateNodeWithOutChildren(SiteMapNode siteMapNode)
{
Node treeNode;
if (siteMapNode.ChildNodes != null && siteMapNode.ChildNodes.Count > 0)
{
treeNode = new Node();
}
else
{
treeNode = new Ext.Net.Node();
treeNode.Leaf = true;
}
treeNode.NodeID = siteMapNode.Key;
treeNode.Text = siteMapNode.Title;
treeNode.Qtip = siteMapNode.Description;
return treeNode;
}
[DirectMethod(ShowMask = true)]
public void callMe(string abc)
{
string folderName = abc;
string nodeId = "check";
Node node = new Node()
{
NodeID = "xyz",
Text = folderName,
Expanded = false,
EmptyChildren = true,
Icon = Icon.Folder
};
//node.CustomAttributes.Add(new ConfigItem("task", folderName, ParameterMode.Value));
//node.CustomAttributes.Add(new ConfigItem("duration", "", ParameterMode.Value));
//node.CustomAttributes.Add(new ConfigItem("user", "", ParameterMode.Value));
//TreeSelectionModel sm = TreePanel1.GetSelectionModel() as TreeSelectionModel;
string SelectedNode = nodeId;
//string childNode = string.Empty;
//string parentName = folderName;
//if (sm.SelectedNodes != null)
//{
// SubmittedNode Subnode = sm.SelectedNodes[0];
// SelectedNode = Subnode.NodeID;
// parentName = Subnode.Text;
// childNode = folderName;
// // AddSubFolder(folderName, nodeId, SelectedNode);
//}
// else
// {
TreePanel2.GetNodeById(SelectedNode).AppendChild(node);
// }
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Drag and Drop betweens two TreePanels - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<style>
.tree {
float: left;
margin: 20px;
border: 1px solid #c3daf9;
}
</style>
<ext:XScript ID="XScriptdd1" runat="server">
<script type="text/javascript">
var beforerecorddrop = function (node, data, overModel, dropPosition, dropFn) {
// debugger;
var draggedRecord = data.records[0].data
var draggedNode = App.TreePanel1.store.getNodeById(draggedRecord.id);
var srcTreeRootNode = App.TreePanel1.getRootNode();
// Fill an array with the path (from leaf to root)
var folderHierarchy = [];
var parentNode = draggedNode.parentNode;
while (parentNode != null && parentNode.id != srcTreeRootNode.id) {
folderHierarchy[folderHierarchy.length] = parentNode;
parentNode = parentNode.parentNode;
}
var curDestNode = overModel;
if (curDestNode.isLeaf()) {
// Dropped on a leaf that is also root?
if (curDestNode.isRoot()) {
return false;
}
// Move one level upper, to an actual folder node.
curDestNode = curDestNode.parentNode;
}
// Walk from shallowest to deepest path nodes, creating them as necessary
for (var i=folderHierarchy.length - 1; i >= 0; i--) {
var thisNode = folderHierarchy[i];
// Check if the folder already exists
var parentExists = false;
for (var j in curDestNode.childNodes) {
if (curDestNode.childNodes[j].data.text == thisNode.data.text) {
parentExists = true;
break;
}
}
// If not, then make a copy of the node into the destination tree
if (!parentExists) {
curDestNode.appendChild(thisNode.copy());
}
// Get child node on dest tree
for (var j in curDestNode.childNodes) {
if (curDestNode.childNodes[j].data.text == thisNode.data.text) {
curDestNode = curDestNode.childNodes[j];
break;
}
}
}
// Drop a copy of the node in the deepest level of the structure created
curDestNode.appendChild(draggedNode.copy());
// Do not continue normal node drop operation.
return false;
};
var beforenodedrop = function (node, data, overModel, dropPosition, dropFn) {
// debugger;
if (Ext.isArray(data.records)) {
var records = data.records,
rec;
data.records = [];
for (var i = 0; i < records.length; i++) {
rec = records[i];
data.records.push(this.store.createModel({
company: rec.get("text"),
price: rec.get("price"),
change: rec.get("change"),
pctChange: rec.get("pctChange"),
lastChange: rec.get("qtip")
}));
rec.remove(true);
}
return true;
}
};
var nodeDragOver = function (targetNode, position, dragData) {
//debugger;
var rec = dragData.records[0],
isFirst = targetNode.isFirst(),
canDropFirst = rec.get('canDropOnFirst'),
canDropSecond = rec.get('canDropOnSecond');
// alert(rec.parentNode.data.text);
#{HdnFolderName}.setValue(rec.parentNode.data.text);
return true;//isFirst ? canDropFirst : canDropSecond;
};
</script>
</ext:XScript>
</head>
<body>
<form id="Form1" runat="server">
<ext:Hidden ID="HdnFolderName" runat="server" />
<ext:ResourceManager ID="ResourceManager1" runat="server"/>
<h1>Drag and Drop betweens two TreePanels</h1>
<p>The TreePanels have a TreeSorter applied in "folderSort" mode.</p>
<p>Both TreePanels are in "appendOnly" drop mode since they are sorted.</p>
<p>Drag along the edge of the tree to trigger auto scrolling while performing a drag and drop.</p>
<p>The data for this tree is asynchronously loaded with a TreeStore.</p>
<div class="tree">
<ext:TreePanel
ID="TreePanel1"
runat="server"
Border="false"
Height="300"
Width="250"
UseArrows="true"
Animate="true">
<Store>
<ext:TreeStore ID="TreeStore1"
runat="server"
OnReadData="LoadPages"
FolderSort="true">
<Proxy>
<ext:PageProxy />
</Proxy>
<Sorters>
<ext:DataSorter Property="text" />
</Sorters>
</ext:TreeStore>
</Store>
<View>
<ext:TreeView ID="TreeView1" runat="server">
<Plugins>
<ext:TreeViewDragDrop ID="TreeViewDragDrop1" runat="server" AppendOnly="true" />
</Plugins>
</ext:TreeView>
</View>
</ext:TreePanel>
</div>
<div class="tree">
<ext:TreePanel
ID="TreePanel2"
runat="server"
Height="300"
Width="250"
Border="false"
UseArrows="true"
AutoScroll="true">
<View>
<ext:TreeView ID="TreeView2" runat="server">
<Plugins>
<ext:TreeViewDragDrop ID="TreeViewDragDrop2" runat="server" AppendOnly="true" />
</Plugins>
<Listeners>
<BeforeDrop Fn="beforerecorddrop" />
</Listeners>
</ext:TreeView>
</View>
<Root>
<ext:Node Text="My Files" Icon="Folder" Expanded="true" NodeID="check" EmptyChildren="true" />
</Root>
<Listeners>
<NodeDragOver Fn="nodeDragOver" />
</Listeners>
</ext:TreePanel>
</div>
</form>
</body>
</html>
