Help RadDropDownTree only checked all child nodes first-level

[Tien]

I have telerik:RadDropDownTree with Product and child nodes level like this.

Please help me, when I check Product then All product checked.

So how can when I check Product then just check only all nodes first-level.

 <telerik:RadDropDownTree runat="server" ID="rcbPro" Skin="Silk" Width="685px"
                            DefaultMessage="Select products" DefaultValue="0" ButtonSettings-ShowCheckAll="true" ButtonSettings-ShowClear="true"
                            DataTextField="Name" DataFieldID="Id" CheckBoxes="CheckChildNodes" DataValueField="Id" DataFieldParentID="Parent"
                            EnableFiltering="true" FilterSettings-Filter="Contains" FilterSettings-EmptyMessage="Input" FilterSettings-Highlight="Matches">
                        </telerik:RadDropDownTree>

 

[Attila Antal]

Hi Tien,

To check all immediate children of a Checked Node, follow the steps below:

1. make sure that the CheckBoxes property of the DropDownTree is set to SingleClick.
2. Subscribe to the ClientLoad event
3. In the ClientLoad event, you will access the embedded Tree and subscribe to the tree's NodeChecked event.
4. The NodeChecked event will trigger as soon as a Node is checked using the Checkbox. This is the moment when you can check for child nodes, and check them all. 

Example code (you can copy/paste the entire code and will work)

 

<script>
    function OnClientLoad(sender, args) {
        sender.get_embeddedTree().add_nodeChecked(OnNodeChecked);
    }
    function OnNodeChecked(sender, args) {
        var currentNode = args.get_node();

        if (currentNode._hasChildren()) {
            var childNodes = currentNode.get_nodes();

            for (var i = 0; i < childNodes.get_count(); i++) {
                var childNode = childNodes.getItem(i);
                childNode.set_checked(currentNode.get_checked())
            }
        }
    }
</script>

<telerik:RadDropDownTree RenderMode="Lightweight" ID="RadDropDownTree1" runat="server" DropDownSettings-Height="50%"
    CheckBoxes="SingleCheck"
    ClientDataSourceID="RadClientDataSource1" DataTextField="FirstName" DataValueField="LastName" DataFieldID="EmployeeID"
    DataFieldParentID="ReportsTo" CheckNodeOnClick="true" OnClientLoad="OnClientLoad">
    <DropDownSettings AutoWidth="Enabled" />
</telerik:RadDropDownTree>

<telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
    <DataSource>
        <WebServiceDataSourceSettings ServiceType="OData" BaseUrl="https://demos.telerik.com/kendo-ui/service/Northwind.svc/">
            <Select Url="Employees/?inlinecount=allpages&%24select=EmployeeID%2CLastName%2CFirstName%2CReportsTo" DataType="JSON" />
        </WebServiceDataSourceSettings>
    </DataSource>
    <Schema DataName="d.results">
    </Schema>
</telerik:RadClientDataSource>

 

UPDATE

The example above will only check the child nodes. It does not add the checked nodes as entries to the DropDownTree. 

To add the entries upon checking the nodes, implement the following code

Create custom prototype functions for adding and removing entries

// Check if the Namespace exists
if (Telerik && Telerik.Web && Telerik.Web.UI && Telerik.Web.UI.RadDropDownTree) {
    // Create a prototope for adding entries
    Telerik.Web.UI.RadDropDownTree.prototype._addEntry = function (entry) {
        // add entry to the collection
        this.get_entries()._add(entry);
        // update the dropdowntree
        this._updateControl(entry, Telerik.Web.UI.DropDownTreeEntryAction.Add);
    }
    // Create a prototope for removing entries
    Telerik.Web.UI.RadDropDownTree.prototype._removeEntry = function (entry) {
        // find the entry in the collection by text and value
        var entryToRemove = this._findEntryByTextAndValue(entry.get_text(), entry.get_value());
        // remove the entry from the collection
        this.get_entries()._remove(entryToRemove);
        // update the dropdowntree
        this._updateControl(entryToRemove, Telerik.Web.UI.DropDownTreeEntryAction.Remove);
    }
}

 

ClientLoad event of the DropDownTree

function OnClientLoad(sender, args) {
    // get reference to the Embedded Tree
    var embeddedTree = sender.get_embeddedTree();
    // store a reference to the DropDownTree in the Embedded Tree object
    embeddedTree.__dropDownTree = sender;
    // attach the NodeChecked event listener to the Embedded Tree object
    embeddedTree.add_nodeChecked(OnNodeChecked);
}

 

Finally, handle the NodeChecked event as follows

function OnNodeChecked(sender, args) {
    // get the reference to DropDownTree
    var dropDownTree = sender.__dropDownTree;
    // get the entries collection
    var entries = dropDownTree.get_entries();
    // current checked node
    var currentNode = args.get_node();

    // check if node has children
    if (currentNode._hasChildren()) {
        // get a collection of child nodes
        var childNodes = currentNode.get_nodes();

        // iterate through all child nodes
        for (var i = 0; i < childNodes.get_count(); i++) {
            // current child node
            var childNode = childNodes.getItem(i);

            // create a new entry based on the Tree Node
            var entry = dropDownTree._createEntry(childNode);

            // check if the clicked node is checked/unchecked
            if (currentNode.get_checked()) {
                // if so call the custom proptotype function for adding the entry and pass the entry as parameter
                dropDownTree._addEntry(entry);
            } else {
                // call the custom proptotype function for removing the entry and pass the entry as parameter
                dropDownTree._removeEntry(entry);
            }

            // check/uncheck the child node
            childNode.set_checked(currentNode.get_checked())
        }
    }
}

 

 

 

Regards,
Attila Antal
Progress Telerik

[Tien]

Thank Attila Antal, your solution so good but the RadDropDownTree just only get Sub1 and not get all second-level's

[Attila Antal]

Hi Tien,

You are right, the example only checked the nodes, but they did not get added as entries to the DropDownTree. 

I have updated my message with the complete solution for checking nodes and adding them as entries to the DropDownTree.

[Tien]

That's good,
Now works fine! Thanks!

[Attila Antal]

Hi Tien,

Thanks for confirming back. I have marked my answer accordingly.