Disable ONLY the node selection in tree view

[Andy]

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]

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]

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]

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]

HI.

It works
Thanks for the solution.

Regards,
Andy

[Greg Smith]

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]

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]

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