Treeview checkedChange event

[Chau]

I am using the treeview with kendoTreeViewFlatDataBinding and kendoTreeViewCheckable='multiple':

<kendo-treeview [nodes]="mytreeviewdata"
                                                textField="desc"
                                                [(checkedKeys)]="checkedKeys"
                                                kendoTreeViewExpandable
                                                [kendoTreeViewCheckable]="multiple"
                                                kendoTreeViewFlatDataBinding
                                                idField="id"
                                                parentIdField="parent_id"
                                                [checkBy]="key"
                                                [isChecked]="isChecked"
                                                [children]="fetchChildren"
                                                (checkedChange)="handleChecking($event)">
 </kendo-treeview>

In the checkedChange event, the argument is theTreeItemLookup which can specify the current item with the checkbox incurring a change.  Is there a property that tells whether the checkbox was selected or deselected?

I am currently adding code to determine whether the change was a 'checked' or 'unchecked', but it seems there must be a simpler way for the treeviewnode to return me that value.

Thanks for any advice.

[Georgi Krustev]

Hello Chau,

The checkedChange event is triggered when a checkbox is clicked, passing the whole required information in order to perform parents/children checking. This event is actually used by the built-in CheckDirective (code) to implement the checking functionality. It actually determines whether the node is checked or not.

That being said, you will need to traverse the checkedKeys collection and determine whether the node is in there or not, just like the built-in directive does.

As a side note, could you elaborate a bit more on your scenario? Do you need just the checked state of the current clicked node or anything else?

Regards,
Georgi Krustev
Progress Telerik

[Chau]

Hi Georgi,

I think if we can have the checkbox value passed  into the checkedChange event along with the TreeItemLookup argument, I will have the data about the node (id, parent_id) and the value of the checkbox (checked or unchecked) without traversing the checkedKeys collection.

When the checkedChange event is fired, do you know if the checkedKeys collection already got updated with the 'checked' or 'unchecked' state of the node? With my debugging of the checkedChange callback function, it does not seem like the checkedKeys collection has been updated. I have to add code to push or remove the node into/from the collection. Note that I am using kendoTreeViewFlatDataBinding.

[Georgi Krustev]

Hello Chau,

Thanks for the feedback. I will forward the suggestion to our dev team for further investigation and consideration. If more users are interested in such functionality we definitely will schedule it for implementation.

With regards to the `checkedChange` event question, yes, it will be raised before the `checkedKeys` collection is updated. As I mentioned in my previous reply, the `checkedChange` event is raised when a checkbox is clicked and the listener, CheckDirective in this case, decides how to treat the passed information. The `checkedKeys` collection is part of the CheckDirective, which implements the checkbox state persistence and if you want to listen to its updates then wire the CheckDirective `checkedKeysChange` event instead.
I will encourage you to examine the custom CheckDirective implementation in the documentation, which reveals how the built-in one works and how to utilize the TreeView events in order to accomplish the desired effect.

https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes/#toc-modifying-the-checked-state

Regards,
Georgi Krustev
Progress Telerik

[Mark]

Here is a problem I am trying to solve. I need to collect all checked nodes. with one exception: if a parent and all its children are checked I need to exclude the parent node. When we check a parent node for the first time checkedKeys has just the parent. Works for me. But if I expend a parent first and then check it then checkedKeys has parent and all its children. At this point I have to exclude children. So, how would I do that?

Thanks

[Ivan]

Hello Mark,

Linking this to ticket 1467710 .

Regards,
Ivan
Progress Telerik

[Mark]

<yes, it will be raised before the `checkedKeys` collection is updated

I dont think it's true today.

I am using the same (checkedChange)="handleChecking($event)" and I see that when I check a child the parent is already in checkedKeys. The same when I check the parent directly. So, how do I know when the parent is checked automatically after all children are cchecked?

[Martin Bechev]

Hi Mark,

I noticed that several threads with a similar topic were opened, so let me summarize the case.

This checkedChange event is fired when the user selects a TreeView node checkbox and as Georgi and Hetali shared here, it's still emitted before the checkedKeys collection is being updated. This can be seen with the following screencast:

https://screenrec.com/share/TjDBnUE018

Starting with unchecked TreeView items, we can notice that checking a node, fires the checkedChange event and in its handler the checkedKeys collection is empty.

In order to have the updated keys on every checked/unchecked node, the developer can utilize checkedKeysChange event. It is emitted each time when the checkedKeys collection was updated.

https://screenrec.com/share/UztLYJDbkp

This allows updating the checked array indexes following the project requirements. 

Another approach that could be taken is to create custom checkboxes, using a node template. Refer to ticket 1498605.

I hope this sheds some light.

Regards,

Martin
Progress Telerik