Get Partial Checked item

[Kuangyi]

Hi, I need to send back checked items in a hierarchical tree view and the state they're in.  The state has to have 3 values, checked, unchecked and the "partial" check where only some children are checked (and the checkbox itself is "filled").

How do I get this state?  I see no class, or anything that tells me it's partial (short of looking through it's child tree and looking for checked items, which I don't want to do).

[Petur Subev]

Hello Kuangyi,

The indeterminate checkboxes are not checked and they are not send to the server. To send them you can attach a handler to the submit event of the form and check them programatically.

Here is an example:

<script type="text/javascript">
    $(function () {
        $('form').submit(function () {
            $('#treeview :checkbox').each(function () {
                if (this.indeterminate) { this.checked = true; }
            });
        })
    })
</script>

All the best,
Petur Subev
the Telerik team

[Alan]

I have a need to send via JSON the $("#treeView").data("kendoTreeView").dataSource.view() back to the server for processing.

I have tried  $('#treeView :checkbox').each(function () {                if (this.indeterminate) { this.checked = true; }            });
prior to the type POST as suggested in the blogs above this one, but the checkboxes which are indeterminate  are being translated via JSON as false.
(The ones that have the full checkmark are being relayed correctly as true)

I have also tried:
$("#treeView :checkbox").each(function () {
                        if ($(this).attr("indeterminate")) {
                                currentDataItem = $("#treeView").data("kendoTreeView").dataItem($(this).closest("li"));
                                currentDataItem.set("checked", true);
                            }
                    });
which gives the same result.
My current v is Kendo UI Web Q1 2013

Any suggestions that will allow this to work would be welcome.

[Petur Subev]

Hello Alan,

How did you configure your TreeView and how you send it to the server? Share your implementation so we can search for potential issues, also if possible try to demonstrate your case with a JsBin example we will be able to advise you more precisely.

Kind Regards,
Petur Subev
Telerik

[Alan]

Petur 

I would be happy to generate all the things you have asked for but before I do, I would like to make sure that I am going down the right path, can you point me to the Kendo docs that describes more about the treeview's checkbox indeterminate state property?

Thank you

[Petur Subev]

Hello Alan,

Basically the 'indeterminate' state of the treeview with checkboxes is enabled automatically when checkChildren option is set to true.

http://docs.kendoui.com/api/web/treeview#configuration-checkboxes.checkChildren


Kind Regards,
Petur Subev
Telerik

[Alan]

Sorry, I must have been unclear before.

After the checkChildren option is set to true in a treeview what is the best way to access the "indeterminate" property on a given checkbox via javasript?

Thank you

[Alex Gyoshev]

Hello Alan,

The indeterminate property is not persisted in the datasource, because it is a feature of the browser checkboxes. If you want to post the indeterminate nodes as checked, you need to loop through the checkboxes, and if they are indeterminate, set the checked field in the datasource:

var tree = $("#treeview").data("kendoTreeView");
$("#treeview :checkbox").each(function() {
    if (this.indeterminate) {
         tree.dataItem(this).checked = true;
    }
});

var data = tree.dataSource.view().toJSON();
console.log(data);

Note that the above code does not call the set("checked", true) method, because this would trigger the checkChildren behavior of the treeview and check all children.

Regards,
Alex Gyoshev
Telerik

[Alan]

Alex~

Is there a way to allow  or enable a tri-state checkbox on a kendo Tree view without having any children?
i.e. I have the following javascript in place:

$("#treeView").kendoTreeView({
                checkboxes: {
                    checkChildren: true
                },


but the datasource for this example will never have any children.

Thanks
Alan Painter

[Alex Gyoshev]

Hello Alan,

What is the expected result of that? A TreeView without children will not show any items, and checkboxes are associated with items, so there will be no checkboxes shown. Still, you can enable the tri-state checkboxes and add new items to the tree afterwards.

Regards,
Alex Gyoshev
Telerik

[Alan]

Sorry I was not clear in asking my question.

using the following code:

$("#treeView").kendoTreeView({
                checkboxes:  true,
                dataSource: [{
                      text: "1st", 
                      text: "2nd",
                      text: "3rd"
                 ] }
                }

What would be the best way to make the checkboxes tri-state?

This example does not have any children but for my needs the checkboxes need to be tri-state.

Thank you

[Alex Gyoshev]

Hello Alan,

I'm afraid that this functionality is not supported. If you need to enable the tri-state of the checkboxes, you may do so with a custom script, as shown in this demo from CSS-tricks. Note that this approach isn't related to the TreeView and can be used standalone.

Regards,
Alex Gyoshev
Telerik

[Alan]

Alex ~

Many thanks for the article. Using the code from the section called "Casual Trash" (yes that is what the article called him/her) suggests the following pattern
may work:

$("#treeView").kendoTreeView({
                checkboxes: {
                    template: "<input type='checkbox' id='cb1' onclick='ts(this)' />"
                },

function ts(cb) {
            if (cb.readOnly) cb.checked = cb.readOnly = false;
            else if (!cb.checked) cb.readOnly = cb.indeterminate = true;
        };

However the onclick event does not seem to fire within the kendo Treeview. Any suggestions on how to make this work?
Thank you

[Alan]

I have went ahead and submitted this as Kendo ticket 760686

Thank you

[Alex Gyoshev]

Hello Alan,

This code will not work along with the checkbox handling in the TreeView. Since you do not have a hierarchy, you don't actually need a TreeView -- you can use the same markup for the items, and use simple HTML. Here's a sample jsBin that shows this.

Regards,
Alex Gyoshev
Telerik