Enable text selection in TreeView

14 posts, 0 answers
  1. IvanB
    IvanB avatar
    7 posts
    Member since:
    Feb 2010

    Posted 01 Feb 2010 Link to this post

    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?

  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 04 Feb 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. IvanB
    IvanB avatar
    7 posts
    Member since:
    Feb 2010

    Posted 11 Feb 2010 Link to this post

    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
  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 17 Feb 2010 Link to this post

    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.
  6. IvanB
    IvanB avatar
    7 posts
    Member since:
    Feb 2010

    Posted 17 Feb 2010 Link to this post

    Hello Yana,
    this didn't work.

    Ivan
  7. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 23 Feb 2010 Link to this post

    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.
  8. IvanB
    IvanB avatar
    7 posts
    Member since:
    Feb 2010

    Posted 23 Feb 2010 Link to this post

    Hello Yana,
    this worked.

    Thank you,
    Ivan
  9. dipen shah
    dipen shah avatar
    11 posts
    Member since:
    Jan 2010

    Posted 30 Mar 2010 Link to this post

    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>

     


  10. Peichung
    Peichung avatar
    37 posts
    Member since:
    Aug 2008

    Posted 06 Oct 2010 Link to this post

    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,

  11. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 11 Oct 2010 Link to this post

    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
  12. Tonino
    Tonino avatar
    107 posts
    Member since:
    Nov 2007

    Posted 14 Dec 2015 Link to this post

    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.

  13. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 14 Dec 2015 Link to this post

    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
  14. Tonino
    Tonino avatar
    107 posts
    Member since:
    Nov 2007

    Posted 14 Dec 2015 in reply to Helen Link to this post

    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.

  15. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 14 Dec 2015 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017