Rank 1
Hi,
I'm considering using the RadTreeView (Version Q2 2009) in my projects, but I have some problems trying to replace node text with HTML table client-side. For example: I have to display a hierarchy of directories with the size of each directory right-aligned near the directory name.
I cannot use templates because I add items via web service.
I use the OnClientNodePopulated client-side event to add HTML tables inside nodes, but the table is rendered below the node image!
I spent several hours trying to create a custom skin to solve this problem, but with no results.
Can you help me?
Thanks in advance,
Nazareno.
This is the code of my ASP.NET page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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></title>
<script language="javascript" type="text/javascript">
function RadTreeView1_ClientNodePopulated(sender, eventArgs) {
var parentnode = eventArgs.get_node();
var childnodes = parentnode.get_nodes();
for (var i = 0; i < childnodes.get_count(); i++) {
var childnode = childnodes.getNode(i);
childnode.get_textElement().innerHTML =
"<table width=\"100%\"><tr><td>"
+ childnode.get_text() +
"</td><td align=\"right\">"
+ childnode.get_attributes().getAttribute("LastWriteTime") +
"</td></tr></table>";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Release">
</asp:ScriptManager>
<div>
<telerik:RadTreeView ID="RadTreeView1" runat="server" Width="400" Height="400" OnClientNodePopulated="RadTreeView1_ClientNodePopulated">
<Nodes>
<telerik:RadTreeNode runat="server" ExpandMode="WebService" Text="C:" ToolTip="C:"
Value="C:\\" ImageUrl="folder.png" ExpandedImageUrl="folder_open.png">
</telerik:RadTreeNode>
</Nodes>
<WebServiceSettings Path="WebService1.asmx" Method="GetDirectories" />
</telerik:RadTreeView>
</div>
</form>
</body>
</html>
This is the code of my web service:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using Telerik.Web.UI;
using System.IO;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService {
[WebMethod]
public RadTreeNodeData[] GetDirectories(RadTreeNodeData node, object context)
{
// extract the "context" dictionary information. OnClientNodePopulating event loads the dictionary
IDictionary<string, object> contextDictionary = (IDictionary<string, object>)context;
// create the array of RadTreeNodeData that will be returned by this method
List<RadTreeNodeData> result = new List<RadTreeNodeData>();
// Make a reference to a directory.
DirectoryInfo di = new DirectoryInfo(node.Value);
// Get a reference to each directory in that directory.
DirectoryInfo[] diArr = di.GetDirectories();
// Returns the names of the directories.
foreach (DirectoryInfo dri in diArr)
{
RadTreeNodeData nodeData = new RadTreeNodeData();
nodeData.Text = dri.Name;
nodeData.Value = dri.FullName;
nodeData.Attributes.Add("LastWriteTime", dri.LastWriteTime.ToString());
nodeData.ExpandMode = TreeNodeExpandMode.WebService;
nodeData.ImageUrl = "folder.png";
nodeData.ExpandedImageUrl = "folder_open.png";
result.Add(nodeData);
}
return result.ToArray();
}
}
4 Answers, 1 is accepted
Tables are block elements which means they start on a new line. As a workaround you can try setting tie CSS display property to "inline" or "inline-block":
<table style="display:inline-block">
Regards,
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Rank 1
thx
Rank 1
thx
You can try adding this CSS rule to your page:
<style type="text/css">
div.RadTreeView .rtIn
{
display: inline-block;
vertical-align: top;
}
</style>
You can check this online demo showing how to use tables inside tree nodes.
Regards,
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.