Get Partial Checked item

15 posts, 1 answers
  1. Kuangyi
    Kuangyi avatar
    30 posts
    Member since:
    Sep 2011

    Posted 02 Oct 2012 Link to this post

    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).
  2. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 05 Oct 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Alan
    Alan avatar
    32 posts
    Member since:
    Jan 2011

    Posted 30 Sep 2013 Link to this post

    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.
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 03 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Alan
    Alan avatar
    32 posts
    Member since:
    Jan 2011

    Posted 03 Oct 2013 Link to this post

    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
  7. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 08 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Alan
    Alan avatar
    32 posts
    Member since:
    Jan 2011

    Posted 08 Oct 2013 Link to this post

    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
  9. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 09 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Alan
    Alan avatar
    32 posts
    Member since:
    Jan 2011

    Posted 17 Nov 2013 Link to this post

    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
  11. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 19 Nov 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Alan
    Alan avatar
    32 posts
    Member since:
    Jan 2011

    Posted 19 Nov 2013 Link to this post

    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
  13. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 19 Nov 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Alan
    Alan avatar
    32 posts
    Member since:
    Jan 2011

    Posted 19 Nov 2013 Link to this post

    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

  15. Alan
    Alan avatar
    32 posts
    Member since:
    Jan 2011

    Posted 20 Nov 2013 Link to this post

    I have went ahead and submitted this as Kendo ticket 760686

    Thank you
  16. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 21 Nov 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready