Check Checkbox after clicking on treenode item template

3 posts, 1 answers
  1. Bartdesign
    Bartdesign avatar
    6 posts
    Member since:
    May 2008

    Posted 02 Dec 2008 Link to this post

    Hi,

    I have an RadTreeView with an custom item template for all nodes. Checkboxes are enabled, and my item template contains a RadComboBox with Load on demand.

    I can't seem to figure out how to get the checkbox of that specific node checked when somebody clicks on the nodes radcombobox which resides in the item template. When i click the item template div itself the node does get selected, but when i click the radcombobox the node stays unselected. I couldn't find anything in the documentation, can somebody shed a light on this?

    Below is my treeview definition, when i click on the asp:labels or the div itself it selects the node. When i click on the radcombobox it doens't.
            <telerik:RadTreeView ID="RadTreeView1" Runat="server" DataFieldID="ID"  
                DataFieldParentID="ParentWebId" DataSourceID="SharepointDataSource"  
                DataTextField="Title" DataValueField="Url" CheckBoxes="true" OnClientNodeClicked="ClientNodeClicked"
                <NodeTemplate> 
                    <div> 
                        <asp:Label ID="SPTitle" runat="server"><%#DataBinder.Eval(Container,"Text") %></asp:Label> 
                        <asp:Label ID="SPURL" runat="server"><%#DataBinder.Eval(Container,"Value") %></asp:Label> 
                         <telerik:RadComboBox ID="SPGroup" runat="server"  
                            EnableLoadOnDemand="True" Text="Geen aangepaste rechten"  
                            OnClientItemsRequesting="OnClientItemsRequesting"
                          
                         <WebServiceSettings Path="../WebSrv/AddUserWebSrv.asmx" Method="GetRoles" /> 
                             <CollapseAnimation Duration="200" Type="OutQuint" /> 
                        </telerik:RadComboBox> 
                         
                    </div> 
                </NodeTemplate> 
     
    <CollapseAnimation Type="OutQuint" Duration="100"></CollapseAnimation> 
     
    <ExpandAnimation Duration="100"></ExpandAnimation> 
            </telerik:RadTreeView> 
  2. Answer
    Simon
    Admin
    Simon avatar
    2281 posts

    Posted 05 Dec 2008 Link to this post

    Hello Bart Brinkhuis,

    Due to previous issues with the Template functionality of the TreeView, the click event that happens in the Template of a TreeNode is not handled by the TreeView itself.

    In order to workaround this limitation, you need to do the following:
    • Store an Unique Value to each Node (so that it can be found via it on the client-side), be it its Value, Text or a Custom Attribute.
    • Store the Unique Value of each Node to its templated RadComboBox.
    • In the event handler of the OnClientFocus event of each ComboBox: find the Node by its Unique Value and select it.
    Below are sample implementations of each of the steps described above:

    protected void RadTreeView1_NodeDataBound(object sender, RadTreeNodeEventArgs e) 
        DataRowView dataRowView = (DataRowView) e.Node.DataItem; 
     
        e.Node.Attributes.Add("nodeId", dataRowView["ID"].ToString()); 

    <telerik:RadComboBox ID="SPGroup" runat="server" Text="Geen aangepaste rechten"  
        nodeId='<%#DataBinder.Eval(Container.DataItem, "ID") %>' OnClientFocus="onFocus"

    function onFocus(sender, eventArgs) 
        var nodeId = sender.get_attributes().getAttribute("nodeId"); 
         
        $find("<%= RadTreeView2.ClientID %>").findNodeByAttribute("nodeId", nodeId).select(); 

    Finally, the Node, which RadComboBox has been clicked, will be selected.

    I hope this approach is acceptable for you.

    Regards,
    Simon
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Bartdesign
    Bartdesign avatar
    6 posts
    Member since:
    May 2008

    Posted 09 Dec 2008 Link to this post

    Hi Simon,

    Thanks for the provided solution. It worked perfectly. I also discovered that I was using .select() instead of .check() to check the checkbox. So it took a while to figure out ;)

    Thanks again.
Back to Top