New to Kendo UI for Angular? Start a free 30-day trial

Preventing the Selection of Parent Nodes in the MultiSelectTree Component

Environment

Product

Progress® Kendo UI for Angular MultiSelectTree

Description

How can I prevent the selection of the parent items in the MultiSelectTree component?

To prevent the selection of the parent nodes in the MultiSelectTree, first, you need to hide the built-in checkboxes for the parent items. This, however, does not affect the default behavior of automatically selecting the parent nodes when all child nodes are selected. In these cases, the tags for the parent nodes will be indicated in the component input.

If you want to prevent this default behavior as well, next, you need to exclude the parent nodes from the displayed tags. This step depends on the current summary-tag mode configuration.

Hide the Parent Node Checkboxes

To hide the built-in checkboxes only for the parent items of the MultiSelectTree, use custom CSS that targets the specific nodes:

css

.k-treeview > ul > li > .k-treeview-top .k-checkbox-wrap,
.k-treeview > ul > li > .k-treeview-mid .k-checkbox-wrap,
.k-treeview > ul > li > .k-treeview-bot .k-checkbox-wrap {
    display: none;
}

Exclude Nodes Without Summary-Tag Mode

To exclude the parent nodes from the rendered selected tags of the MultiSelectTree, use the tagMapper callback function and return a filtered array of tags, in which only the parent items are removed:

public tagMapper(tags: any[]): any[] {
    return tags.filter(item => !item.items);
}

The following example demonstrates how to hide the checkboxes for the parent nodes and exclude the parent items from the rendered tags.

Change Theme

Theme

Loading ...

Exclude Nodes With Summary-Tag Mode

To exclude the parent nodes from the count of selected items, shown in the single summary tag of the MultiSelectTree, calculate the new count and use the GroupTagTemplate directive to display it in a template:

html

<ng-template kendoMultiSelectTreeGroupTagTemplate let-dataItems>
    {{ calculateLength(dataItems) }} item(s) selected
</ng-template>

public calculateLength(dataItems: any[]): number {
    return dataItems.filter(item => !item.items).length;
}

The following example demonstrates how to hide the checkboxes for the parent nodes and adjust the text of the single summary tag.