TreeView Indeterminate not working properly in Edge

[Ofir]

Hello,

 

When I run the tree view checkboxes example from your own site (https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes/),

it works properly in Chrome.

 

But in Edge there's this issue:once you only check a single children of a node, hence making its parent's state Indeterminate, clicking again on the parent doesn't update the children. While in Chrome all the children are selected, in Edge nothing happens.

From my testing, it seems like "checkedChange" event is not fired in Edge when clicking on an Indeterminate node.

 

What can be done? I use this component in our site, and we must support Edge users as well.

[Svet]

Hi Ofir,

Indeed, that is an issue on our side that we are aware of and currently looking for an option to fix it. Please track it at the following link:

https://github.com/telerik/kendo-themes/issues/1126

What could be done as a workaround until the issue is resolved is to add the following custom CSS:

    input[type=radio],
    input[type=checkbox] {
      vertical-align: middle;
    }
    
    .k-radio::-ms-check,
    .k-checkbox::-ms-check {
      border-color: rgba(0,0,0,0.08);
      background-color: #ffffff;
    }
    .k-radio:checked::-ms-check,
    .k-checkbox:checked::-ms-check {
      border-color: #ff6358;
      color: white;
      background-color: #ff6358;
    }

Please check the following example demonstrating that approach:

https://stackblitz.com/edit/angular-7erevf?file=app/app.component.ts

Please accept our apologies for any inconvenience caused until the issue is resolved. Feel free to write back in case I can provide any additional details about this case. Thank you in advance.

Regards,
Svetlin
Progress Telerik

[Svet]

Hi Ofir,

Please let me know in case you would like us to ping you once a fix is released.

Regards,
Svetlin
Progress Telerik

[Ofir]

Hi Svetlin,

Thanks for the answer.

The issue I mentioned doesn't relate to the checkboxes design or CSS, but to the checkedChange event not being fired in Edge, hence not checking Indeterminate checkbox's children checked as well.

 

Again, this can be seen in the example you provided in https://stackblitz.com/edit/angular-7erevf?file=app/app.component.ts, when clicking on an indeterminate checkbox while using Edge.

[Dimiter Topalov]

Hello Ofir,

Thank you for providing further details about this problem. Indeed, it seems the CSS-related issue is resolved in the latest dev version of the themes, but the checkedChange event is not triggered when the user clicks on a checkbox that is in an indeterminate state.

This is why I logged a new issue to our GitHub repo that you can track here:

https://github.com/telerik/kendo-angular/issues/2662

I also updated your Telerik points for bringing the problem to our attention.

Regards,
Dimiter Topalov
Progress Telerik