|
Subscribe
|
Hi,
Example in the SVN only Ext.Net.Examples\Examples\TreePanel\Advanced\TreeGrid\Default.aspx
--
Vladimir Shcheglov
Coolite Inc.
Development Team
Forum Guidelines | Coolite Examples | Coolite API Docs | ExtJS API Docs | Twitter
|
|
|
Well that explains it!
I will look into using this method thanks vladsch 
----
Timothy Grant Vogelsang
tvogelsang [at] esolutionsgroup [dot] ca
Project Manager / Senior Software Developer
Microsoft .NET Framework 3.5
Coolite Toolkit 1.0
|
|
|
Hi,
tried with the EnforceNodeType="true" I don't nodeType in your response, that property should force rendering node type. Can you show controller?
--
Vladimir Shcheglov
Coolite Inc.
Development Team
Forum Guidelines | Coolite Examples | Coolite API Docs | ExtJS API Docs | Twitter
|
|
|
Hello vladsch,
Below is an example of what I'm trying to do, obviously I'm going to need to do some CSS work. Which control do you think I can achieve this with?
http://img716.imageshack.us/img716/124/examplex.png
Appreciate your input.
Cheers
----
Timothy Grant Vogelsang
tvogelsang [at] esolutionsgroup [dot] ca
Project Manager / Senior Software Developer
Microsoft .NET Framework 3.5
Coolite Toolkit 1.0
|
|
|
Hi,
You need to use TreeGrid. Its TreeGridColumn suppost Template (as inner property XTemplate or as simple string property Template)
Unfortunatelly you can place controls inside tree node ui representation (button in your image)
I can suggest to emulate anchor link, like
1. Use the following template inside TreeGridColumn
<XTemplate runat="server">
<Html>
<span class="x-node-cmd" style="text-decoration:underline;color:Blue;">Show details</span>
</Html>
</XTemplate>
2. Use the following TreeGrid Click listener
<Click Handler="if(e.getTarget('.x-node-cmd')){alert(node.attributes.User);}" />
Also you can investigate TreeGrid example from SVN which demonstrate template column also
--
Vladimir Shcheglov
Coolite Inc.
Development Team
Forum Guidelines | Coolite Examples | Coolite API Docs | ExtJS API Docs | Twitter
|
|
|
Thanks vladsch,
Can you give me an example of how I can bind JSON data to the TreeGrid? Unfortunately the example is using HTML markup?
Cheers
----
Timothy Grant Vogelsang
tvogelsang [at] esolutionsgroup [dot] ca
Project Manager / Senior Software Developer
Microsoft .NET Framework 3.5
Coolite Toolkit 1.0
|
|
|
Hi,
Please see the following sample
Page
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" 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 id="Head2" runat="server">
<title>TreeGrid - Ext.NET Examples</title>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var formatHours = function(v) {
if (v < 1) {
return Math.round(v * 60) + " mins";
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + "h " + Math.round(min * 60) + "m";
} else {
return v + " hour" + (v === 1 ? "" : "s");
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<h1>TreeGrid</h1>
<ext:TreeGrid
runat="server"
Title="Core Team Projects"
Width="500"
Height="300"
EnableDD="true">
<Columns>
<ext:TreeGridColumn Header="Task" Width="230" DataIndex="Task" />
<ext:TreeGridColumn Header="Duration" Width="100" DataIndex="Duration" Align="Center" SortType="AsFloat">
<XTemplate runat="server">
<Html>
{Duration:this.formatHours}
</Html>
<Functions>
<ext:JFunction Name="formatHours" Fn="formatHours" />
</Functions>
</XTemplate>
</ext:TreeGridColumn>
<ext:TreeGridColumn Header="Assigned To" Width="150" DataIndex="User" />
</Columns>
<Loader>
<ext:TreeLoader DataUrl="TreeLoader1.ashx" PreloadChildren="true"></ext:TreeLoader>
</Loader>
<Root>
<ext:AsyncTreeNode Text="Tasks" NodeID="root">
</ext:AsyncTreeNode>
</Root>
</ext:TreeGrid>
</form>
</body>
</html>
HttpHandler
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace Ext.Net.Examples.Examples.TreePanel.Advanced.TreeGrid
{
/// <summary>
/// Summary description for $codebehindclassname$
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class TreeLoader1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/json";
string nodeId = context.Request["node"];
if (!string.IsNullOrEmpty(nodeId))
{
TreeNodeCollection nodes = new TreeNodeCollection(false);
TreeNode node1 = new TreeNode();
node1.EnforceNodeType = true;
node1.CustomAttributes.Add(new ConfigItem("Task", "Project: Shopping", ParameterMode.Value));
node1.CustomAttributes.Add(new ConfigItem("Duration", "13.25", ParameterMode.Raw));
node1.CustomAttributes.Add(new ConfigItem("User", "Tommy Maintz", ParameterMode.Value));
TreeNode subNode1 = new TreeNode();
subNode1.EnforceNodeType = true;
subNode1.CustomAttributes.Add(new ConfigItem("Task", "Housewares", ParameterMode.Value));
subNode1.CustomAttributes.Add(new ConfigItem("Duration", "1.25", ParameterMode.Raw));
subNode1.CustomAttributes.Add(new ConfigItem("User", "Tommy Maintz", ParameterMode.Value));
TreeNode subSubNode1 = new TreeNode();
subSubNode1.EnforceNodeType = true;
subSubNode1.CustomAttributes.Add(new ConfigItem("Task", "Kitchen supplies", ParameterMode.Value));
subSubNode1.CustomAttributes.Add(new ConfigItem("Duration", "2.25", ParameterMode.Raw));
subSubNode1.CustomAttributes.Add(new ConfigItem("User", "Tommy Maintz", ParameterMode.Value));
subNode1.Nodes.Add(subSubNode1);
node1.Nodes.Add(subNode1);
nodes.Add(node1);
TreeNode node2 = new TreeNode();
node2.EnforceNodeType = true;
node2.CustomAttributes.Add(new ConfigItem("Task", "Project: Shopping", ParameterMode.Value));
node2.CustomAttributes.Add(new ConfigItem("Duration", "13.25", ParameterMode.Raw));
node2.CustomAttributes.Add(new ConfigItem("User", "Tommy Maintz", ParameterMode.Value));
TreeNode subNode2 = new TreeNode();
subNode2.EnforceNodeType = true;
subNode2.CustomAttributes.Add(new ConfigItem("Task", "Housewares", ParameterMode.Value));
subNode2.CustomAttributes.Add(new ConfigItem("Duration", "1.25", ParameterMode.Raw));
subNode2.CustomAttributes.Add(new ConfigItem("User", "Tommy Maintz", ParameterMode.Value));
TreeNode subSubNode2 = new TreeNode();
subSubNode2.EnforceNodeType = true;
subSubNode2.CustomAttributes.Add(new ConfigItem("Task", "Kitchen supplies", ParameterMode.Value));
subSubNode2.CustomAttributes.Add(new ConfigItem("Duration", "2.25", ParameterMode.Raw));
subSubNode2.CustomAttributes.Add(new ConfigItem("User", "Tommy Maintz", ParameterMode.Value));
subNode2.Nodes.Add(subSubNode2);
node2.Nodes.Add(subNode2);
nodes.Add(node2);
context.Response.Write(nodes.ToJson());
context.Response.End();
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
--
Vladimir Shcheglov
Coolite Inc.
Development Team
Forum Guidelines | Coolite Examples | Coolite API Docs | ExtJS API Docs | Twitter
|
|
|
Thanks vladsch, I was able to get it to work.
Quick question about the loading. Would it be possible to load the next set of nodes from the server when Timothy (2) is clicked? I would prefer to not load so many levels immediately.
Cheers,
Example.aspx:
<ext:TreeGrid ID="SearchResults" runat="server"
Border="false"
HideHeaders="true"
Lines="false"
TrackMouseOver="false"
UseArrows="true">
<Columns>
<ext:TreeGridColumn DataIndex="name" Header="Text" Width="500" />
</Columns>
<Loader>
<ext:TreeLoader Clearonload="true" DataUrl="Example.ashx" PreloadChildren="true" RequestMethod="POST" />
</Loader>
<Root>
<ext:AsyncTreeNode NodeID="Root" Text="Search Results" />
</Root>
</ext:TreeGrid>
JSON:
[{"cls":"highlight","name":"Category 1","nodeId":"7762e88a-1bd3-4f34-a83f-adee17416291","nodeType":"node","children":[{"cls":"highlight","name":"Sub Category 1","nodeId":"e8668179-3aab-4b14-9a5f-66b6b04be795","nodeType":"node","children":[{"cls":"highlight","name":"Timothy (2)","nodeId":"cbcfddb3-ecbf-4deb-9110-ca45336af0c5","nodeType":"node"}]}]}]
----
Timothy Grant Vogelsang
tvogelsang [at] esolutionsgroup [dot] ca
Project Manager / Senior Software Developer
Microsoft .NET Framework 3.5
Coolite Toolkit 1.0
|
|
|
Hi,
Make 'Timothy (2)' node as async. In this case that node will request own children from server. TreeLoader always passes node id to the server therefore you always know which node requests the children
--
Vladimir Shcheglov
Coolite Inc.
Development Team
Forum Guidelines | Coolite Examples | Coolite API Docs | ExtJS API Docs | Twitter
|
|
|
Thanks vladsch,
Can you give a quick example how to show and hide different content in a column? For example, if I have an XTemplate for a column "Available" and I only want to show the contents of the column if Available has a value?
Cheers
----
Timothy Grant Vogelsang
tvogelsang [at] esolutionsgroup [dot] ca
Project Manager / Senior Software Developer
Microsoft .NET Framework 3.5
Coolite Toolkit 1.0
|
|
|
|