OnClientNodeClicked not firing for entire node

[Brad H]

I have the OnClientNodeClicked subscribed to a function which calls the toggle method on the node.  However, the node is only toggling when the user clicks the inner text of the node (rtIn).  How can I make the node toggle when any part of the node panel is clicked?  Similar to the way the menu in the Telerik Demo page works on the left hand side.  Any help would be appreciated.  I've included some code to further illustrate.  Thank you.

<telerik:RadTreeView runat="server" ID="trtvLeftNav" LoadingStatusPosition="BeforeNodeText" Skin="TreeLeft"
    AllowNodeEditing="False" EnableDragAndDrop="false" EnableEmbeddedSkins="false"
    EnableEmbeddedBaseStylesheet="false" OnClientDoubleClick="OnClientDoubleClickHandler"
    OnClientNodeExpanding="toggleHandler" OnClientNodeCollapsing="toggleHandler"
    OnClientNodeClicked="OnClientNodeClickedHandler">
    <Nodes>
        <telerik:RadTreeNode runat="server" Text="Our Products" ExpandMode="ClientSide">
        </telerik:RadTreeNode>
        <telerik:RadTreeNode runat="server" Text="Root Node" ExpandMode="ClientSide">
            <nodes>
                <telerik:RadTreeNode runat="server" Text="Child Node" ExpandMode="ClientSide">
                </telerik:RadTreeNode>
            </nodes>
        </telerik:RadTreeNode>
        <telerik:RadTreeNode runat="server" Text="Root Node 2" ExpandMode="ClientSide">
        </telerik:RadTreeNode>
    </Nodes>
</telerik:RadTreeView>
<script type="text/javascript">
var cancel = false;

function toggleHandler(sender, eventArgs)
{
    eventArgs.set_cancel(cancel);
    cancel = false;
}

function OnClientDoubleClickHandler(sender, eventArgs)
{
    cancel = true;
}

function OnClientNodeClickedHandler(sender, eventArgs)
{  var node = eventArgs.get_node();
   node.toggle();
}
</script>

[Yana]

Hi Brad,

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

<style type="text/css">

    div.RadTreeView .rtLI,
    div.RadTreeView .rtIn,
    div.RadTreeView .rtTop,
    div.RadTreeView .rtMid,
    div.RadTreeView .rtBot {
        width: 100% !important;
    }

    div.RadTreeView .rtIn {
        display: inline-block !important;
    }

</style>

Kind regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Brad H]

This did widen the rtIn in my node so that when it is clicked, the node expands......however, if I click above or below the rtIn within the node, the node does not expand.  I want the user to be able to expand the node by clicking anywhere in the node.  Just like how the double-click expand feature works by default.....but for a single click.  Thank you for your help.

[Brad H]

I figured out my problem.  I did all of my padding on the rtMid so the top and bottom portions of the rtIn element weren't big enough.  So, I just moved my paddings to the rtIn elements instead.  Also, within the rtMid or rtBot div.....there are 3 spans, rtSp, rtPlus (or minus) and rtIn.  When the rtPlus or rtIn is clicked, the node will expand. (but not the rtSp)  So the trick is to get the rtPlus and rtIn to fill your entire node using whatever padding you need.  The answer Yana gave would work provided you don't have other paddings and margins on your skin affecting the previously indicated objective.  Hope this helps someone.