Treeview with checkboxes - custom behavior

2 posts, 0 answers
  1. Shaun
    Shaun avatar
    16 posts
    Member since:
    Jul 2012

    Posted 06 Dec 2013 Link to this post

    Greetings,

    I have a requirement to create a treeview with checkboxes with the following details:

    • The tree will have a lot of items in it, so it should load nodes dynamically upon expansion.  My assumption is that this means I will be binding to a Hierarchical DataSource
    • Special behavior:  When an item is checked, all children should be checked.  (Unchecking should not uncheck the children, it's just the check operation that propagates downwards)
    • Impotant: The built-in "checkChildren" behavior does not work for this requirement as it enables tri-state and links the checked state of the parent to the checked state of the children, which is not desired.

    This combination is proving to be very challenging to implement.   I have tried using a template for the nodes and providing my own checkbox, however the checkbox doesnt seem to bind properly (and anyways, two way binding would be needed and I don't have any idea how to enable that).


    Any advice on how to approach this?

  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 09 Dec 2013 Link to this post

    Hello Shaun,

    You can use the default checkbox template and provide the custom check functionality when checkboxes are checked. However, the loadOnDemand + checkboxes scenario requires you to handle checked items that do not have loaded subnodes in some way - the subnodes will not be checked in the treeview, because they are not loaded.

    The following jsBin should help you with implementing this functionality. Please note that it also shows a bug that has been fixed in the latest internal builds (it always updates the indeterminate state, even though chechChildren has not been set).

    Regards,
    Alex Gyoshev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top