This is a migrated thread and some comments may be shown as answers.
Enable text selection in TreeView
13 Answers 75 Views
This is a migrated thread and some comments may be shown as answers.
IvanB
Top achievements
Rank 1
IvanB asked on 02 Feb 2010, 01:47 AM
I have the following problem:
I'm putting an arbitrary html, enclosed in HtmlGenericControl, in the leaf nodes of a tree control. I want the users to be able to select this html (or portions of it) with the mouse and then copy it into the clipboard. The selection works fine in Firefox, but not in IE (7 and 8).

Does anybody know how to solve this issue?

13 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 04 Feb 2010, 12:29 PM
Hi Ivan Botushev,

Could you please paste here a simple code which will help us reproduce the issue? Thanks
Kind regards,
Yana
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.
0
IvanB
Top achievements
Rank 1
answered on 11 Feb 2010, 10:08 PM
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
0
Yana
Telerik team
answered on 17 Feb 2010, 08:59 AM
Hello Ivan,

Thank you for sending the code.

Please add the following css styles to your page and let us know how it goes:

<style type="text/css">
    .rtIn, .rtTemplate,
    .rtTemplate div,
    .rtTemplate span
    {
        -webkit-user-select: text !important;
    }
</style>


Regards,
Yana
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.
0
IvanB
Top achievements
Rank 1
answered on 17 Feb 2010, 05:31 PM
Hello Yana,
this didn't work.

Ivan
0
Yana
Telerik team
answered on 23 Feb 2010, 11:21 AM
Hello Ivan Botushev,

You are right, I'm sorry for my confusion.

Please add the following javascript code at the end of your page to allow the text to be highlighted:

<script type="text/javascript">
  Telerik.Web.UI.RadTreeView.prototype._cancelEvent = function() { }
</script>

Best regards,
Yana
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.
0
IvanB
Top achievements
Rank 1
answered on 23 Feb 2010, 05:50 PM
Hello Yana,
this worked.

Thank you,
Ivan
0
dipen shah
Top achievements
Rank 1
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>

 


0
Peichung
Top achievements
Rank 1
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,

0
Helen
Telerik team
answered on 11 Oct 2010, 11:59 AM
Hi Peichung,

Did you try to include all required scripts for RadTreeView:

<Scripts>
   <asp:ScriptReference Path="~/Scripts/Common/Core.js" />
   <asp:ScriptReference Path="~/Scripts/Common/jQuery.js" />
   <asp:ScriptReference Path="~/Scripts/Common/jQueryPlugins.js" />
   <asp:ScriptReference Path="~/Scripts/Common/Animation/AnimationScripts.js" />
   <asp:ScriptReference Path="~/Scripts/Common/Navigation/NavigationScripts.js" />
   <asp:ScriptReference Path="~/Scripts/TreeView/RadTreeViewScripts.js" />
</Scripts>

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
0
Tonino
Top achievements
Rank 1
answered on 14 Dec 2015, 11:10 AM

Hello!

Is this also valid for newer versions of the controls?

I'm using version 2014.3.1209.40 and I'd does not work with IE 11 and Firefox 41.

Regards,

Tonino.

0
Helen
Telerik team
answered on 14 Dec 2015, 01:20 PM
Hi,

Here is a reference for all required scripts for the controls:

http://docs.telerik.com/devtools/aspnet-ajax/general-information/performance/disabling-embedded-resources


Regards,
Helen
Telerik
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 Feedback Portal and vote to affect the priority of the items
0
Tonino
Top achievements
Rank 1
answered on 14 Dec 2015, 01:39 PM

Hi Helen

Excuse me, I didn't express me correctlty. I was talking about

 

<script type="text/javascript">
 
  Telerik.Web.UI.RadTreeView.prototype._cancelEvent = function() { }
 
</script>

 

After adding above script-snippet following css

<style type="text/css">
   .RadTreeView .rtLI
   {
       -moz-user-select: text !important;
   }
   </style>

 

everything works as expected.

 

Regards,

Tonino.

 

Regards,

Tonino.

0
Helen
Telerik team
answered on 14 Dec 2015, 01:49 PM
Hi Tonino,

If I understand you correct you manage to resolve the problem? If not - please specify what is the exact problem?

Regards,
Helen
Telerik
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 Feedback Portal and vote to affect the priority of the items
Asked by
IvanB
Top achievements
Rank 1
Answers by
Yana
Telerik team
IvanB
Top achievements
Rank 1
dipen shah
Top achievements
Rank 1
Peichung
Top achievements
Rank 1
Helen
Telerik team
Tonino
Top achievements
Rank 1
Share this question
or