TreeView Check State - Get Intermediate (TriState)

[Tim]

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,
Tim.

[Alexander Valchev]

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:

• http://docs.kendoui.com/getting-started/data-attribute-initialization
  
  

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.

Regards,
Alexander Valchev
Telerik

[Tim]

Thank you, Alexander!

[Mohamed]

Hi,

will the same functionality be available for TreeList?

Regards,

Mo

[Alex Gyoshev]

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.

Regards,
Alex Gyoshev
Telerik