Hierarchical DropDownTree Binding with Check Boxes

[Elisa]

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"
            }
        ],

   

[Martin]

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

[Elisa]

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]

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.