Bind Checkboxes to DataSource field in the TreeView

7 posts, 0 answers
  1. Salim
    Salim avatar
    28 posts
    Member since:
    Jun 2016

    Posted 31 Oct Link to this post

    Is there a way to bind the checkboxes of the TreeView to a field in the DataSource?
  2. Stefan
    Admin
    Stefan avatar
    264 posts

    Posted 01 Nov Link to this post

    Hello Salim,

    The checkboxes can be bound to the HierarchicalDataSource with the checked field(please have in mind that the field name is important).

    I made a Dojo example demonstrating how based on a field from the HierarchicalDataSource, the TreeView nodes will be checked or not:

    http://dojo.telerik.com/usOPu

    I hope this is helpful.

    Regards,
    Stefan
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
  3. Kendo UI is VS 2017 Ready
  4. Salim
    Salim avatar
    28 posts
    Member since:
    Jun 2016

    Posted 01 Nov in reply to Stefan Link to this post

    Thanks Stefan.

    1. It doesn't work when loadOnDemand is set to "true"

    2. Can we bind it to our own field other than the "checked"?

  5. Stefan
    Admin
    Stefan avatar
    264 posts

    Posted 02 Nov Link to this post

    Hello Salim,

    Regarding the questions:

    1) It doesn't work when loadOnDemand is set to "true"- The provided example is working as expected when the loadOnDemand property is set to true. An issue can occur when the loadOnDemand is set to true and the nested levels are more than three because the DataSource is not read in a single pass when provided to the TreeView. This causes the TreeView to load only the first level, infer that all nodes are not checked, and then propagate the checked state downwards, as in remote loading scenarios.

    http://dojo.telerik.com/Ebovu

    2) Can we bind it to our own field other than the "checked"? - When the checked is used, the widget will automatically bind its value to the checkboxes, if other fields are used then all of the bindings have to be done manually as this scenario is not officially supported.

    Regards,
    Stefan
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
  6. Salim
    Salim avatar
    28 posts
    Member since:
    Jun 2016

    Posted 02 Nov Link to this post

    What you are saying about the loadOnDemand is true if we do not load all the data once. We have all the data, but we don't want to render them on the UI because the data is huge. That's why we are using loadOnDemand. The TreeView should check the data and not the UI in order to determine the state of the UI
  7. Salim
    Salim avatar
    28 posts
    Member since:
    Jun 2016

    Posted 02 Nov in reply to Salim Link to this post

    Sorry, I meant in the latest sentence:

    . The TreeView should check the data and not the UI in order to determine the state of the checkbox of the parent node

  8. Stefan
    Admin
    Stefan avatar
    264 posts

    Posted 04 Nov Link to this post

    Hello Salim,

    The reason for this is because the loadOnDemand is designed to work with data which is loaded from the server to make smaller requests. And when only a part of the data is fetched the widget does not have an information for the child node as they are not loaded yet.

    When a local data is used there is no need of the loadOnDemand property as it will not affect the application because the data is already available, using it can only lead to the described issue.

    Also, if the data is available the loadOnDemand will not affect the rendering as the data will be collapsed by default.

    Regards,
    Stefan
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
Back to Top
Kendo UI is VS 2017 Ready