Dec 16, 2015, 10:46 AM
[CLOSED] Tree panel: having column model with tree store
Hi team,
As per the below code, I am trying to add Column model inside to a tree panel. But am getting the below error.:
The example in this link "https://examples2.ext.net/#/TreePanel/Basic/DragDrop_Between_Trees/" gives the tree structure only for a single column. But my requirement has multiple columns.
How do I add multiple columns for the tree panel with tree store.
As per the below code, I am trying to add Column model inside to a tree panel. But am getting the below error.:
<%@ 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;
}
</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>
<script>
var handler = function (grid, rowIndex, colIndex, actionItem, event, record, row) {
Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : ''), record.get('task'));
};
var formatTreeValue = function (v) {
var strText = '<span style="background-color:#b7ea17;color: #080908;width:100%!important;display: inline-table;text-align:right;">Hi</span>'
if (v != null || v != undefined) {
return String.format(strText, 'transparent', 'black', v);
}
};
</script>
</head>
<body>
<form id="Form1" 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">
<Store>
<ext:TreeStore ID="TreeStore2"
runat="server"
OnReadData="LoadPages"
FolderSort="true">
<Proxy>
<ext:PageProxy />
</Proxy>
<Sorters>
<ext:DataSorter Property="text" />
</Sorters>
</ext:TreeStore>
</Store>
<Fields>
<ext:ModelField Name="task" />
<ext:ModelField Name="user" />
<ext:ModelField Name="duration" />
<%-- <ext:ModelField Name="done" Type="Boolean" />--%>
</Fields>
<ColumnModel>
<Columns>
<ext:ActionColumn ID="ActionColumn2" runat="server"
Text="Edit"
Width="40"
MenuDisabled="true"
Align="Center">
<Items>
<ext:ActionItem Tooltip="Edit task" Icon="ChartBar" Handler="handler">
<IsDisabled Handler="return !record.data.leaf;" />
</ext:ActionItem>
</Items>
</ext:ActionColumn>
<ext:ActionColumn ID="ActionColumn3" runat="server"
Text="Edit"
Width="40"
MenuDisabled="true"
Align="Center">
<Items>
<ext:ActionItem Tooltip="Edit task" Icon="ChartPie" Handler="handler">
<IsDisabled Handler="return !record.data.leaf;" />
</ext:ActionItem>
</Items>
</ext:ActionColumn>
<ext:ActionColumn ID="ActionColumn4" runat="server"
Text="Edit"
Width="40"
MenuDisabled="true"
Align="Center">
<Items>
<ext:ActionItem Tooltip="Edit task" Icon="ChartOrganisation" Handler="handler">
<IsDisabled Handler="return !record.data.leaf;" />
</ext:ActionItem>
</Items>
</ext:ActionColumn>
<ext:ActionColumn ID="ActionColumn1" runat="server"
Text="Edit"
Width="40"
MenuDisabled="true"
Align="Center">
<Items>
<ext:ActionItem Tooltip="Edit task" Icon="Cmy" Handler="handler">
<IsDisabled Handler="return !record.data.leaf;" />
</ext:ActionItem>
</Items>
</ext:ActionColumn>
<ext:TreeColumn ID="TreeColumn2"
runat="server"
Text="Task"
Flex="2"
Sortable="true"
DataIndex="task" />
<ext:Column ID="Column4"
runat="server"
Text="Assigned To"
Flex="1"
Sortable="true"
DataIndex="user" />
<%-- <ext:TemplateColumn ID="TemplateColumn1"
runat="server"
Text="Duration"
Flex="1"
Sortable="true"
DataIndex="duration"
Align="Center">
<Template ID="Template1" runat="server">
<Html>
{duration:this.formatHours}
</Html>
<Functions>
<ext:JFunction Name="formatHours" Fn="formatHours" />
</Functions>
</Template>
</ext:TemplateColumn>--%>
<ext:Column ID="Column3"
runat="server"
Text="Assigned To"
Flex="1"
Sortable="true"
DataIndex="user" />
<%-- <ext:CheckColumn ID="CheckColumn1" runat="server"
Text="Done"
DataIndex="done"
Width="40"
Editable="true"
StopSelection="false" />--%>
<%-- <ext:TemplateColumn ID="TemplateColumn2" runat="server" DataIndex="user" Width="74" Text="Jan">
<Template ID="Template12" runat="server">
<Html>
{user:this.formatTreeValue}
</Html>
<Functions>
<ext:JFunction Name="formatTreeValue" Fn="formatTreeValue" />
</Functions>
</Template>
</ext:TemplateColumn>--%>
</Columns>
</ColumnModel>
<View>
<ext:TreeView ID="TreeView2" runat="server">
<Plugins>
<ext:TreeViewDragDrop ID="TreeViewDragDrop2" runat="server" AppendOnly="true" />
</Plugins>
</ext:TreeView>
</View>
<Root>
<ext:Node Text="My Files" Icon="Folder" Expanded="true" />
</Root>
</ext:TreePanel>
</div>
</form>
</body>
</html>The example in this link "https://examples2.ext.net/#/TreePanel/Basic/DragDrop_Between_Trees/" gives the tree structure only for a single column. But my requirement has multiple columns.
How do I add multiple columns for the tree panel with tree store.
Last edited by Daniil; Dec 17, 2015 at 12:56 PM.
Reason: [CLOSED]
