Replace node text with HTML table client-side

5 posts, 0 answers
  1. Nazareno Petris
    Nazareno Petris avatar
    1 posts
    Member since:
    Apr 2006

    Posted 28 Sep 2009 Link to this post

    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();
        }   
    }

  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 29 Sep 2009 Link to this post

    Hello Nazareno Petris,

    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,
    Albert,
    the Telerik team

    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.
  3. Steve
    Steve avatar
    3 posts
    Member since:
    Aug 2012

    Posted 08 Oct 2009 Link to this post

    using display:inline-block didnt work for us....does anyone have any ideas...this is big for us we are putting html in the text and it always shows up below the expand close icon...which looks horribly and increases the size of the treeview to almost useless


    thx
  4. Steve
    Steve avatar
    3 posts
    Member since:
    Aug 2012

    Posted 08 Oct 2009 Link to this post

    using display:inline-block didnt work for us....does anyone have any ideas...this is big for us we are putting html in the text and it always shows up below the expand close icon...which looks horribly and increases the size of the treeview to almost useless


    thx
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 09 Oct 2009 Link to this post

    Hi Steve,

    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,
    Albert,
    the Telerik team

    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.
Back to Top