Treeview checkedChange event

8 posts, 0 answers
  1. Chau
    Chau avatar
    74 posts
    Member since:
    Sep 2017

    Posted 28 Feb 2018 Link to this post

    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.

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 01 Mar 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Chau
    Chau avatar
    74 posts
    Member since:
    Sep 2017

    Posted 01 Mar 2018 in reply to Georgi Krustev Link to this post

    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.

  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 02 Mar 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Mark
    Mark avatar
    6 posts
    Member since:
    May 2020

    Posted 21 May 2020 in reply to Georgi Krustev Link to this post

    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

  6. Ivan
    Admin
    Ivan avatar
    41 posts

    Posted 25 May 2020 Link to this post

    Hello Mark,

    Linking this to ticket 1467710 .

    Regards,
    Ivan
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  7. Mark
    Mark avatar
    6 posts
    Member since:
    May 2020

    Posted 16 Dec 2020 in reply to Georgi Krustev Link to this post

    <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?

  8. Martin
    Admin
    Martin avatar
    280 posts

    Posted 18 Dec 2020 Link to this post

    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

    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/.

Back to Top