This is a migrated thread and some comments may be shown as answers.

Enable text selection in TreeView

13 Answers 204 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

13 Answers, 1 is accepted

answered on 11 Feb 2010, 10:08 PM

selectedcontent.JPG

Hello Yana,
here is the sample code.
Default.aspx

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadTreeViewTest._Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <%@ Register TagPrefix="NGR" TagName="NodeTemplate" Src="~/NodeTemplate.ascx" %> 
        
            <!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> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <div> 
        
                <telerik:RadScriptManager runat="server" /> 
        
                <telerik:RadAjaxPanel ID="ajaxPanel" runat="server" EnableEmbeddedScripts="true" EnablePageHeadUpdate="true"> 
        
                <telerik:RadTreeView ID="treeView" runat="server" Visible="true" 
        
                        DataTextField="DisplayName" DataValueField="RecordId" DataFieldId="RecordId" DataFieldParentId="ParentRecordId" 
        
                        MultipleSelect="true" 
        
                        EnableEmbeddedSkins="true" 
        
                        onnodedatabound="treeView_NodeDataBound" > 
        
                        <NodeTemplate><NGR:NodeTemplate ID="nodeTemplate" runat="server" /></NodeTemplate> 
        
                </telerik:RadTreeView> 
        
                </telerik:RadAjaxPanel> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

Default.aspx.cs

    
            using System; 
        
            using System.Data; 
        
            using System.Web.UI.HtmlControls; 
        
            using System.Web.UI.WebControls; 
        
            using Telerik.Web.UI; 
        
            namespace RadTreeViewTest 
        
            { 
        
                public partial class _Default : System.Web.UI.Page 
        
                { 
        
                    protected void Page_Load(object sender, EventArgs e) 
        
                    { 
        
                        DataTable table = new DataTable(); 
        
                        table.Columns.Add("DisplayName"); 
        
                        table.Columns.Add("RecordId"); 
        
                        table.Columns.Add("ParentRecordId"); 
        
                        table.Columns.Add("IsLeaf", typeof(bool)); 
        
                        DataRow row = table.NewRow(); 
        
                        row["DisplayName"] = "Node 1"; 
        
                        row["RecordId"] = "1"; 
        
                        row["IsLeaf"] = false; 
        
                        table.Rows.Add(row); 
        
                        row = table.NewRow(); 
        
                        row["DisplayName"] = "Node 1/1"; 
        
                        row["RecordId"] = "1/1"; 
        
                        row["ParentRecordId"] = "1"; 
        
                        row["IsLeaf"] = false; 
        
                        table.Rows.Add(row); 
        
                        row = table.NewRow(); 
        
                        row["DisplayName"] = "Node 1/1/1"; 
        
                        row["RecordId"] = "1/1/1"; 
        
                        row["ParentRecordId"] = "1/1"; 
        
                        row["IsLeaf"] = true; 
        
                        table.Rows.Add(row); 
        
                        treeView.DataSource = new DataView(table); 
        
                        treeView.DataBind(); 
        
                    } 
        
                    protected void treeView_NodeDataBound(object sender, RadTreeNodeEventArgs e) 
        
                    { 
        
                        if ((bool)((DataRowView)e.Node.DataItem).Row["IsLeaf"]) 
        
                        { 
        
                            Panel content = new Panel(); 
        
                            Label l = new Label(); 
        
                            l.Text = "Some text."; 
        
                            content.Controls.Add(l); 
        
                            content.Controls.Add(new HtmlGenericControl("br")); 
        
                            l = new Label(); 
        
                            l.Text = "More text."; 
        
                            content.Controls.Add(l); 
        
                            e.Node.Controls.Add(content); 
        
                        } 
        
                    } 
        
                } 
        
            }

NodeTemplate.ascx

    
            <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="NodeTemplate.ascx.cs" Inherits="RadTreeViewTest.NodeTemplate" %> 
        
            <asp:Label ID="labelReportName" runat="server" Text='<%# Eval("DisplayName") %>' Font-Size="12px"></asp:Label>

The project references Telerik.Web.UI, Version=2009.1.527.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4.

I can select the node's content in Firefox (see attached image), but not in IE (6, 7, and 8). I would appreciate any suggestions on how to solve this issue.

Thanks,
Ivan

answered on 30 Mar 2010, 08:30 PM

Hi,

We are using RadTreeView. It is binding fine. We are displying Tooltip on each node. Now requirement is that user able to select all node value and paste in textpad.
I try following stuff

<style type="text/css">

.rtIn, .rtTemplate,

.rtTemplate div,

.rtTemplate span

{

-webkit-user-select: text !important;

}

</style>

and

<script type="text/javascript">

Telerik.Web.UI.RadTreeView.prototype._cancelEvent = function() { }

</script>

It allow me to select text of node. But it is copying tooltip values as well. More over when we copy in textpad it is not formated well. Can you please suggest any solution? TreeView provide any functionality to copy code in text pad?



our code is as follows






<



 



telerik:RadTreeView ID="TreeView" AllowNodeEditing="false" ShowLineImages="true" runat="server" Skin="Default">
 


 

<NodeTemplate>
 


 

<table align="left" width="100%" cellpadding="0" cellspacing="0">
 


 

<tr>
 


 

<td width="1%" >
 


 

<img alt="Health" src="Images/circle-<%# Eval("Image1") %>.png" />
 


 

</td>
 


 

<td width="30%">
 


 

<asp:Label ID="lblProperty" runat="server"><%# String.IsNullOrEmpty(DataBinder.Eval(Container, "DataItem.Property").ToString()) ? "&nbsp;" : DataBinder.Eval(Container, "DataItem.Property")%></asp:Label>
 


 

<telerik:RadToolTip ID="PropertyRadToolTip" runat="server" TargetControlID="lblProperty"
 


 

RelativeTo="Element" Position="MiddleRight" Animation="Slide" Skin="WebBlue">
 


<%

# DataBinder.Eval(Container, "DataItem.ThresholdsText")%>
 
 

</telerik:RadToolTip>
 


 

</td>
 


 

<td width="30%">
 


 

<asp:Label ID="lblValue" runat="server"><%# String.IsNullOrEmpty(DataBinder.Eval(Container, "DataItem.Value").ToString()) ? "&nbsp;" : DataBinder.Eval(Container, "DataItem.Value")%></asp:Label>
 


 

<telerik:RadToolTip ID="ValueRadToolTip" runat="server" TargetControlID="lblValue"
 


 

RelativeTo="Element" Position="MiddleRight" Animation="Slide" Skin="WebBlue">
 


<%

# DataBinder.Eval(Container, "DataItem.ThresholdsText")%>
 
 

</telerik:RadToolTip>
 


 

</td>
 
 

</tr>
 


 

</table>
 


 

</NodeTemplate>
 


 

<CollapseAnimation Duration="100" Type="OutQuint" />
 


 

<ExpandAnimation Duration="100" />
 
 

</telerik:RadTreeView>

answered on 06 Oct 2010, 08:57 PM

Hi.

Telerik.Web.UI.RadTreeView.prototype._cancelEvent works if the TreeView was loaded on initial page load. When I load the TreeView dynamically in postback, say in a grid's edit form, I received the error:

Microsoft JScript runtime error: 'Telerik.Web.UI.RadTreeView.prototype' is null or not an object

I guessed it was because the required client-side scripts weren't loaded. I tried to add TreeView script in ScriptManagerProxy:

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.TreeView.RadTreeViewScripts.js" />

but that didn't work. My final workaround was to add an empty tree (<telerik:RadTreeView ID="tt" unat="server"></telerik:RadTreeView>) outside of the grid to make sure RadTreeView scripts were loaded on page load. Could you please advise a better way to enable text selection when tree view was dynamically loaded? Thanks,

answered on 11 Oct 2010, 11:59 AM

Hi Peichung,

Did you try to include all required scripts for RadTreeView:

Dipen, could you please open a formal support ticket and send us a sample project which demonstrates the issue to examine it locally?

Regards,
Helen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Enable text selection in TreeView

13 Answers, 1 is accepted