Hierarchical DropDownTree Binding with Check Boxes

1 Answer 34 Views
DropDownTree
Elisa
Top achievements
Rank 1
Iron
Elisa asked on 06 May 2022, 07:14 PM | edited on 11 May 2022, 03:15 PM

I'm using a dropdowntree editor on a grid column. The bound field is a list of objects.

  • How would I prevent the top-level from getting selected when using check boxes with CheckAll true? I only want the second level items.
  • Conversely, how would I select the top level if any of the second level items are checked?

Ex. I would not want 18' checked here, just the two children on the 2nd level:

Editor:

function equipmentEditor(container, options) {
        let ds = new kendo.data.HierarchicalDataSource({
            data: _equipmentTypes,
            schema: {
                model: {
                    children: "Items"
                },
            },
        });

        $("<input data-bind='value: EquipmentTypes'/>")
            .attr("name", options.field)
            .appendTo(container)
            .kendoDropDownTree({
                checkboxes: {
                    checkChildren: true
                },
                checkAll: true,
                autoWidth: true,
                dataTextField: "Description",
                dataValueField: "Code",
                dataSource: ds,
                autoClose: false,
                tagMode: "single",
            });

_equipmentTypes data used in dataSource:

[
    {
        "Code": "17'",
        "Description": "17'",
        "Items": [
            {
                "Code": "T17.DUMP",
                "Description": "17' Dump Trailer",
                "Items": []
            }
        ]
    },
    {
        "Code": "18'",
        "Description": "18'",
        "Items": [
            {
                "Code": "T18.FLAT",
                "Description": "18' Flatbed Trailer",
                "Items": []
            },
            {
                "Code": "T18.TANK",
                "Description": "18' FoodGrade Tank Trailer",
                "Items": []
            }
        ]
    }
]

 

Posted object:

"EquipmentTypes": [
            {
                "Code": "17'",
                "Description": "17'",
                "Items": [
                    {
                        "Code": "T17.DUMP",
                        "Description": "17' Dump Trailer",
                        "Items": [],
                        "id": "",
                        "index": 0,
                        "checked": true,
                        "_level": 1,
                        "_tagUid": "b13353ee-cbd3-4226-8b4c-080d4ea775e4"
                    }
                ],
                "index": 0,
                "expanded": true,
                "checked": true,
                "_level": 0,
                "_tagUid": "c0785273-c8bd-4a18-8598-de5d7ba6c16e"
            },
            {
                "Code": "T17.DUMP",
                "Description": "17' Dump Trailer",
                "Items": [],
                "id": "",
                "index": 0,
                "checked": true,
                "_level": 1,
                "_tagUid": "b13353ee-cbd3-4226-8b4c-080d4ea775e4"
            }
        ],

   

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 11 May 2022, 03:21 PM

Hello, Elisa,

About preventing top-level node selection, please refer to this forum thread as it seems related to the same topic. Regarding the second question to select the parent node if a child item is checked, please check this example and let me know if it works as expected. 

About the last question, if you wish to implement a multi-select editor, you will need to extend the Binder configuration as demonstrated in this How-To article. Note that as custom editors, not all widgets' functionalities might be supported in such scenario (specifically using checkboxes).

Let me know if you have any further questions.

Regards,
Martin
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/.

Elisa
Top achievements
Rank 1
Iron
commented on 11 May 2022, 03:35 PM | edited

I don't think the suggested forum post will work for me. I want the top node to be checkable, not disabled, so that it can select all children. I just don't want it included in the selected items list. 

For the other situation, where I want the parent node checked if a child is checked, your example is only actually checking the child. In this scenario, I want the child and parent included in the selected items list when the child is checked. 

 

 

Martin
Telerik team
commented on 16 May 2022, 01:02 PM

Achieving the first requirement would require to customize the built-in behaviour of the DropDownTree to skip selecting the parent node. The second requirement can be achieved when checkChildren is false and applying the logic from this example.
Tags
DropDownTree
Asked by
Elisa
Top achievements
Rank 1
Iron
Answers by
Martin
Telerik team
Share this question
or