Help RadDropDownTree only checked all child nodes first-level

1 Answer 259 Views
DropDownTree
Tien
Top achievements
Rank 1
Tien asked on 21 Nov 2022, 04:57 AM

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>

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Attila Antal
Telerik team
answered on 23 Nov 2022, 04:46 PM | edited on 28 Nov 2022, 03:59 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tien
Top achievements
Rank 1
commented on 24 Nov 2022, 07:15 AM

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


Attila Antal
Telerik team
commented on 28 Nov 2022, 04:01 PM

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
Top achievements
Rank 1
commented on 30 Nov 2022, 03:47 AM

That's good,
Now works fine! Thanks!


Attila Antal
Telerik team
commented on 02 Dec 2022, 04:51 PM

Hi Tien,

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

Tags
DropDownTree
Asked by
Tien
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Share this question
or