Search code examples
kendo-uikendo-treeview

Kendo Treeview checkbox change event


My treeview is this

 @(Html.Kendo().TreeView()
.Name("AccessControlTree")
.DataTextField("Name")
.Deferred()
.HtmlAttributes(new { style = "width: 500px" })
.Checkboxes(c => c
.CheckChildren(false)
 )
 .DataSource(dataSource => dataSource.Read(read => read.Action(@Model.ActionMethod, @Model.ControllerName, new { area = @Model.AreaName }).Data("sethierarchyoption"))
              .ServerFiltering(false))
               .LoadOnDemand(true)
               .Events(events =>
                              {
                                  events.DataBound("onTreeViewBound").Select("onSelect");
                              })

                    )

I need to customize the behavior as following;1)If we select parent node ,then children also be selected.2)If the parent is NOT selected, the user should be able to select a single child without changing the checked state of parent. I can do the first one by making '.CheckChildren(true)', but then the second one fails.I think if i catch the checked change event in java-script then i may solve this.Any idea?


Solution

  • The problem get solved by using this.function onTreeViewBound(e) { $("input:checkbox[name=checkedNodes]").on('click', function () { var checkedStatus = $(this).is(':checked'); $(this).closest(".k-item").find(".k-group .k-item input:checkbox[name=checkedNodes]").each(function () { $(this).attr('checked', checkedStatus); $(this).prop('checked', checkedStatus); }); }); }