Disable ONLY the node selection in tree view in UI for ASP.NET AJAX TreeView

Andy

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

Shinu

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.

Andy

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

Shinu

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

Andy

7 posts

Member since:
Mar 2008

Posted 15 Dec 2008 Link to this post

HI.

It works
Thanks for the solution.

Regards,
Andy

Greg Smith

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

Princy

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.

Greg Smith

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