How to get parent checkbox unchecked when one of his childs is unchecked

[walid]

I have a treeview that has the checkboxes shown.
What i would like to do is to uncheck parent when one of child checkboxes is unchecked.
I'am using a script provide in previous post to get all childs checkboxes checked when parent is checked.
http://www.telerik.com/community/forums/aspnet-mvc/treeview/how-to-get-child-checkboxes-selected-when-parent-checkbox-is-selected.aspx
I just can't find parent of clicked checkbox
I'am using this :

 

$(checkedbox).closest(

'.t-item').parent().closest('.t-item').find('> ul > li > div > .t-checkbox :checkbox');

 

 

Thanks

[Rich]

Did you find a solution for this?

[BRUNO]

Please any solution for this issue?

[Rich]

Two different solutions:

First solution:

Make sure you add this to the treeview code in the view:
        .ClientEvents(events => events
                        .OnChecked("nodeChecked")
                        .OnDataBound("nodeChecked")
            )

Then add this javascript function:

        function nodeChecked(e) {
            var item = $(e.item),
            isChecked = e.checked,
            treeView = $(this).data('tTreeView'),
            childCheckBoxes = item.find(":checkbox");
            treeView.nodeCheck(childCheckBoxes, e.checked);
        }

Alternative solution:

Assuming your treeview id is TreeView, add this javascript - make sure it's executed AFTER the treeview is rendered:
$('#TreeView').find("li")
                          .find('> div > .t-checkbox :checkbox')
                          .bind('click', function (e) {
                              var isChecked = $(e.target).is(':checked');
                              var treeView = $($(e.target).closest('.t-treeview')).data('tTreeView');
                              var item = $(e.target).closest('.t-item');
                              var checkboxes = item.find('.t-checkbox :checkbox');
                              $.each(checkboxes, function (index, checkbox) {
                                  $(checkbox).attr('checked', isChecked ? true : false);
                                  treeView.checkboxClick(e, checkbox);
                              });

                              var siblings = item.parent().find('> li .t-checkbox');
                              var siblingsLength = siblings.length;
                              var checkedLength = siblings.find(':checked').length;

                              var parentCheckBox = item.parent().closest('.t-item').find('> div .t-checkbox :checkbox');
                              parentCheckBox.css('opacity', "1");
                              parentCheckBox.css('filter', "alpha(opacity=100)");

                              if (siblingsLength == checkedLength)
                                  parentCheckBox.attr('checked', true);
                              else if (checkedLength == 0)
                                  parentCheckBox.attr('checked', false);
                              else {
                                  parentCheckBox.attr('checked', true)
                                  parentCheckBox.css('opacity', "0.5");
                                  parentCheckBox.css('filter', "alpha(opacity=50)");
                              }
                              treeView.checkboxClick(e, parentCheckBox)

                          });

This solution will dim parent checkbox if only some children are unchecked.

[BRUNO]

Thank you Rich, but I cant use your solution yet.

When using first solution, the javascript function is not executed.

Using the secound solution I got the following error:

treeView.checkboxClick is not a function

Please do you know what might be happening?

Thanks

[Rich]

Bruno -

Make sure your treeview is named "TreeView".  Here is an example of the view code:

@{Html.Telerik().TreeView()
        .Name("TreeView")
        .ShowCheckBox(true)
        .Items(item =>
        {
            item.Add()
                .Text("Status").Expanded(true).Checked(true)
                .Items(subItem =>
                {
                    subItem.Add().Text("On Plan").Checked(true);
                });

            item.Add()
                .Text("Owner").Checked(true)
                .Items(subItem =>
                {
                    subItem.Add().Text("PSP").Checked(true);
                });
        })
        .ClientEvents(events => events
                        .OnChecked("nodeChecked")
                        .OnDataBound("nodeChecked")
            )
        .Render();

        }

Let me know if that doesn't work...

[shilin]

Hi Rich,

I use the alternative solution in your demo code, the only problem is that when post back to server, only the actually checked checkboxes (not the ones checked by JavaScript) will show up in the TreeView_checkedNodes list. I changed treeView.checkboxClick to treeView.nodeCheck, and then the problem was solved. But when I use IE back button and resubmit the form, the checked checkboxes will not show up in the TreeView_checkNodes list again. It seems that the states of all the checkboxes have been lost. BTW, there is no this issue in Firefox. Any ideas would be appreciated.

Thanks.