TreeView Check State - Get Intermediate (TriState)

5 posts, 1 answers
  1. Tim
    Tim avatar
    114 posts
    Member since:
    Aug 2011

    Posted 28 Oct 2013 Link to this post

    Hello telerik,

    I am trying to use your treeView control... Three main problems for which I hope there are simple answers possible:

    1. How can I activate checkboxes if I am using the MVVM way like this (in Default.htm):
    01.<script id="index" type="text/x-kendo-template">
    02.        <h3> Demo TreeView </h3>
    03.        <div id="example" class="k-content">
    04.            <div id="treeview" class="demo-section"
    05.                data-role="treeview"
    06.                data-text-field="label"
    07.                data-checkboxes="true"
    08.                data-bind=" source: filtergroups,
    09.           events: { select: onSelect, expand: onExpand, change: onChange }">
    10.            </div>
    Using TypeScript I currently have to activate it in code like this; not nice!
    (<kendo.ui.TreeView>treeview).options.checkboxes.checkChildren = true;

    2. Having the checkboxes activated I want to react on a checkedChanged Event - but only to those events resulting from user input! Not the events fired by the GUI itself. Currently I am binding an event in my viewModel but that way I get too much events!!!
    1.(<kendo.Observable>this).bind("change", (e) => {
    2.                if (e.field == "checked") {
    3.                    console.log(e);
    4.                    $(document).trigger("checkedChanged", [ e.sender ] )
    5.                    }
    6.            });
    3. And now to the most important question: How can I determine if I have a intermediate state checkbox? I can only see checked or unchecked! Where is the possibility hidden to get to know if this node is in intermediate state?

    And one last question: Is there a TreeListView on the roadmap? That would be great!
    Looking forward to hearing from you! Hopefully with good news! :)

    Cheers and a big thanks in advance,
  2. Answer
    Alexander Valchev
    Alexander Valchev avatar
    2895 posts

    Posted 30 Oct 2013 Link to this post

    Hi Tim,

    Up to your questions:

    1. The syntax is: data-checkboxes='{"checkChildren": true}'
    To understand how JavaScript configuration options are transformed into data attributes please check this help article:
    2. There is no checkedChanged event in Kendo UI nor in jQuery. My recommendation is to use the jQuery change event. You can hook up to it in the following way:
    $("#treeview").on("change", ":checkbox", function(e) {
        //your logic

    3. You can check the indeterminate state with JavaScript.
    htmlElement.indeterminate; //true or false
    //or jQuery
    $(htmlElement).prop("indeterminate"); //true or false

    4. I am afraid that the TreeList widget is not included in the roadmap, but the request for its implementation has been already submitted on Kendo UI Feedback portal. If you want you may can a vote for it here. The more votes it collects, the higher priority it will have.

    Alexander Valchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Tim
    Tim avatar
    114 posts
    Member since:
    Aug 2011

    Posted 31 Oct 2013 Link to this post

    Thank you, Alexander!
  4. Mohamed
    Mohamed avatar
    1 posts
    Member since:
    Jun 2016

    Posted 02 Jun 2016 Link to this post


    will the same functionality be available for TreeList?



  5. Alex Gyoshev
    Alex Gyoshev avatar
    2527 posts

    Posted 06 Jun 2016 Link to this post

    Hello Mohamed,

    Tri-state checkboxes are not currently planned for the TreeList widget. You can submit this as a feature request on UserVoice, so that it is considered for implementation in a future release.

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