Disable ONLY the node selection in tree view

8 posts, 0 answers
  1. Andy
    Andy avatar
    7 posts
    Member since:
    Mar 2008

    Posted 08 Dec 2008 Link to this post

    I would like to disable the node selection in the Telerik Tree View.
    Is there any property that I can use ?

    My approach is I have added an event in the "OnClientNodeClicking" and the function is as followed
    <script type="text/javascript">
    function onClientNodeClicking(sender, eventArgs)
        {
            eventArgs.set_cancel(true);
        }
    </script>
    <table>
    <tr>
                <td style="padding-left: 25px;padding-top : 10px" colspan="3">
                    <rad:RadTreeView ID="rdTaxonomy" runat="server" AllowNodeEditing="false"
                         DragAndDrop="false" CheckBoxes="true" MultipleSelect="true"
                         onClientNodeClicking="onClientNodeClicking" />
                </td>            
            </tr>
    </table>

    This way will work only on the aspx page. But I need to make it work on the user control.

    Any suggestion how it should be done on the user control (ascx) ?

    Thanks


  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 09 Dec 2008 Link to this post

    Hi Andy,

    You can try the following approacht to achieve the desired scenario.
     
        *  Hook on the BeforeClientClick event of the treeview
        * Return false in the event handler for those nodes that are not meant to be selected

    JS:
    function BeforeClientClickHandler(node)
    {
      
        return false;
    }

    You can also refer the following forum discussion.
    Disable selection of nodes



    Shinu.

  3. Andy
    Andy avatar
    7 posts
    Member since:
    Mar 2008

    Posted 09 Dec 2008 Link to this post

    Hi

    I can't find the event BeforeClientClick  event on the treeview.
    I am using the treeview from Telerik.Web.UI version 2008.2.826.20 .

    Kindly advise

    Thanks

  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Dec 2008 Link to this post

    Hi Andy,

    BeforeClientClick event is available only with RadTreeView for asp.net. Seeing the tag prefix for RadTreeView as 'rad' I thought you were using asp.net RadControls. For the ajax version you can use OnClientNodeClicking event instead as you have mentioned. I tried your code in the ASCX page and it is working fine. You can use the same JavaScript code on the ascx page as well.

    Here is my ascx :
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <telerik:RadTreeView ID="RadTreeView1" OnClientNodeClicking="OnClientNodeClicking" runat="server"
     <Nodes> 
      <telerik:RadTreeNode Text="Continents"  > 
       <Nodes> 
        <telerik:RadTreeNode Text="Asia" ></telerik:RadTreeNode> 
            <telerik:RadTreeNode Text="Europe" ></telerik:RadTreeNode> 
       </Nodes> 
      </telerik:RadTreeNode> 
      <telerik:RadTreeNode Text="Language" > 
       <Nodes> 
           <telerik:RadTreeNode Text="Arabic" ></telerik:RadTreeNode> 
           <telerik:RadTreeNode Text="English" ></telerik:RadTreeNode> 
       </Nodes> 
      </telerik:RadTreeNode> 
     </Nodes>  
    </telerik:RadTreeView> 
     
    <script type="text/javascript" > 
       
      function OnClientNodeClicking(sender, eventArgs) 
      { 
       eventArgs.set_cancel(true); 
      } 
      
    </script> 


    Regards
    Shinu

  5. Andy
    Andy avatar
    7 posts
    Member since:
    Mar 2008

    Posted 15 Dec 2008 Link to this post

    HI.

    It works
    Thanks for the solution.

    Regards,
    Andy
  6. Greg Smith
    Greg Smith avatar
    11 posts
    Member since:
    Sep 2009

    Posted 06 Jan 2010 Link to this post

    Can this also be applied to the MouseOver effect on the same nodes? If the use can't select the node I'd like to prevent the style changes to the node on MouseOver.


    Thanks
    Greg
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 07 Jan 2010 Link to this post

    Hello Greg,

    Check out the following css style setting to prevent style changes on hovering over the nodes of a treeview:
    aspx:
      <telerik:RadTreeView ID="RadTreeView1" OnClientMouseOver="ClientMouseOver" ....>

    js:
     function ClientMouseOver(sender,args) 
        {   
           args.get_node().set_cssClass("ChangeStyle");      
        } 

    css:
    .ChangeStyle 
        { 
          background:none !important; 
          border:none !important; 
        } 

    Hope this helps..
    Princy.
  8. Greg Smith
    Greg Smith avatar
    11 posts
    Member since:
    Sep 2009

    Posted 07 Jan 2010 Link to this post

    Thanks Princy that worked perfectly.

    I added some code to only apply this to the top level nodes (nodes with children):

    function ClientMouseOver(sender, eventArgs) 
        var node = eventArgs.get_node();    
     
        if(node.get_nodes().get_count()>0)  
        { 
            node.set_cssClass("ChangeStyle"); 
        } 



Back to Top