How to get child checkboxes selected when parent checkbox is selected.

[Makoto]

I have a treeview that has the checkboxes shown.

What I'd like to do is to be able to automatically select all the child checkboxes when you click on a parent node's checkbox.

I would imagine that I'd have to do this on the client-side but I didn't see any documentation for handling the checkbox change events.

Thanks

[Georgi Krustev]

Hello Makoto,

To achieve your goal you first need to wire click event to all checkboxes, where the list item has children.
Then you just need to check the child checkboxes when the parent is clicked. Here is a code snippet showing how to accomplish these tasks:

<script type="text/javascript">
    $(document).ready(function() {
        $('#TreeView').find("li:has(ul)")
                      .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 checkboxes = $(e.target).closest('.t-item')
                                                      .find('> ul > li > div > .t-checkbox :checkbox');
                            $.each(checkboxes, function(index, checkbox) {
                                $(checkbox).attr('checked', isChecked ? true : false);
                                treeView.updateCheckState(null, checkbox);
                            });
                      });
    })
</script>

Nevertheless some changes were made in the telerik.treeview.js file in order to cover the new requirements. The changes were made in the updateCheckState method. Here is the code which you need to use in order to patch it:

updateCheckState: function(e, element) {
    var $element = $(element);
    var $item = $element.closest('.t-item');
    var $checkboxHolder = $("> div > .t-checkbox", $item);
    var $index = $checkboxHolder.find(':input[name="checkedNodes.Index"]');
    var isChecked = $element.is(':checked');

    $checkboxHolder.find(':input[name="checkedNodes[' + $index.val() + '].Text"]').remove();
    $checkboxHolder.find(':input[name="checkedNodes[' + $index.val() + '].Value"]').remove();

    if (isChecked) {
        var html = new $t.stringBuilder();

        html.cat('<input type="hidden" value="')
            .cat(this.getItemValue($item))
            .cat('" name="checkedNodes[')
            .cat($index.val())
            .cat('].Value" class="t-input">')
            .cat('<input type="hidden" value="')
            .cat(this.getItemText($item))
            .cat('" name="checkedNodes[')
            .cat($index.val())
            .cat('].Text" class="t-input">');

        $(html.string()).appendTo($checkboxHolder);
    }
},

For your convenience I have attached the test project, which implements the required features, to this message.

Greetings,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Makoto]

Georgi,

Thanks a bunch.  Previously, even just using the sample code for the TreeView CheckBoxSupport sample, it wasn't passing along the Text or the Value from what I had checked.  Now that functionality is working after replacing the Telerik javascript files with the ones in this attachment.

[Pierre-Olivier Grangaud]

Hi Georgi,

Will you include this modification in a future version of Telerik MVC or will we have to patch telerik.treeview.js each time we upgrade to a new version if we need this feature ? 

Best regards,

[Georgi Krustev]

Hi Pierre-Olivier Grangaud ,

I confirm that made modifications will be included in the future releases of the Telerik Components for ASP.NET MVC. Nevertheless this method was not public and was not intended for public use. In the next release of the components we will introduce public method nodeClick, which will have the same functionality.

Kind regards,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Tyler]

Hello I am attempting to use this solution to expand all the parent node and check all of my child nodes when clicking the parent node.  I can't seem to get the patch code to work in 2011.1.315.  I am getting a Microsoft JScript runtime error: Object doesn't support this property or method on the function call line:
treeView.updateCheckState(null, checkbox);

function onChecked(e) {
        $('#AjaxTreeView').find("li:has(ul)")
                          .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');
                              treeView.expand(item);
                              var checkboxes = $(e.target).closest('.t-item')
                                                          .find('> ul > li > div > .t-checkbox :checkbox');
                              $.each(checkboxes, function (index, checkbox) {
                                  $(checkbox).attr('checked', isChecked ? true : false);
                                  treeView.updateCheckState(null, checkbox);
                              });
                          });
                      }

    
The treeview binding:

<%= Html.Telerik().TreeView()
        .Name("AjaxTreeView")
        .ShowCheckBox(true)
        .DataBinding(dataBinding => dataBinding
                .Ajax().Select("_AjaxLoading", "TreeView")
            )
            .ClientEvents(events => events
                        .OnChecked("onChecked")
                        .OnDataBound("onChecked")
            )

%>

This seems like it would be a pretty common thing people would want to do.  Could I get a working 2011.1.315 telerik.treeview.min.js with the included patch?

Thanks.

[Georgi Krustev]

Hello ,

The updateCheckState method is not used anymore. You will  need to use nodeCheck() method. Here is a code snippet which shows how to achieve your goal:

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

    $.each(childCheckBoxes, function (index, checkbox) {
        $(checkbox).attr('checked', isChecked);
        treeView.nodeCheck(null, checkbox);
    });
}

Regards,
Georgi Krustev
the Telerik team

[Tyler]

Hey Georgi,

Thanks that new code snippet works for checking and unchecking all the child nodes.  Now a problem seems to exist for me when using the checkbox demo example to retrieve the checked nodes the "Text" and "Value" attributes of the children nodes are null in the List<TreeViewItem> on post back.  What am I missing?

[HttpPost]
[Authorize]
public PartialViewResult Save(IndividualModel model, List<TreeViewItem> AjaxTreeView_checkedNodes)
{
    string message = string.Empty;
    if (AjaxTreeView_checkedNodes != null)
    {
        foreach (TreeViewItem node in AjaxTreeView_checkedNodes)
        {
            message += node.Text + "<br/>";
        }
    }
    ViewData["message"] = message;
    ViewData["AjaxTreeView_checkedNodes"] = AjaxTreeView_checkedNodes;
}

My message ends up being:
message = "Architectural<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>"

The parent node's text is there and the list of child nodes, but there is no text or values assigned in them. They are assigned on initial binding, but seem to disappear on post back when using this solution.  If I manually check each of the child nodes the text and values get passed properly.

message = "Commercial: Light Industrial - New<br/>Commercial: Office Buildings - New<br/>Institutional: Correctional<br/>Institutional: Correctional - Renovate<br/>Institutional: Health Care Facilities<br/>Institutional: Health Care Facilities - New<br/>Institutional...

[Tyler]

I think I found the solution, but please verify:

treeView.nodeCheck(null, checkbox);

needs to be:

treeView.nodeCheck(childCheckBoxes, checkbox);

It now passes the .Text and .Value properly in the form data.

[Kyaw]

Thz for the code,
I tried the code and it works for checkbox and values

[Tuanv]

Hi!
I'm tried your code, check all children is working properly but uncheck is not when use :
treeView.nodeCheck(childCheckBoxes, checkbox);

you can help me fix this problem.
Thanks

[Tuanv]

<script type="text/javascript">
    function nodeChecked(e) {
        var item = $(e.item),
        isChecked = e.checked,
       
        treeView = $(this).data('tTreeView'),
        childCheckBoxes = item.find(":checkbox");
        
        $.each(childCheckBoxes, function (index, checkbox) {
            $(checkbox).attr('checked', isChecked);
            treeView.nodeCheck(childCheckBoxes, checkbox.checked);
        });
    }
</script>
I got it run well

[Vir]

Thanks everyone for your all useful replies. 
I think this is a better solution, as it performs less number of iteration over the treeview object. 

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

--- only change here is the last line in the code: 

 treeView.nodeCheck(checkbox, checkbox.checked);

Thanks!

[Vir]

ok I found even a better solution :

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

We do not need foreach loop as 'nodeCheck' does that looping for us. :)
also FYI : 'childCheckBoxes' contain all the children and their children as well. 

Thanks!

[Rich]

Removed

[BRUNO]

Please someone have a complete example, with the current solution for this issue?

Thanks