Kendo treeview - prevent selection on deactivate guard (Angular)

[Bartosz]

I have an Angular2/Typescript application using Kendo Treeview. When I try to change selection, deactivate guard shows a modal "Are u sure?". Even if I click "no" and there's no navigate event, selection change. Is there any way to prevent node selection untill exact condition (OK chosen on modal) happen?

[Dimiter Topalov]

Hello Bartosz,

Can you please provide further details about the scenario, the desired functionality and the exact setup (ideally send us an isolated runnable project that we can inspect work on) so I can try suggesting the best solution for the specific use case (if one is available)? Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Bartosz]

Hi Dimiter,

Here is some kind of example:

https://dojo.telerik.com/eMUyURIR/2

I have navigation menu based od Kendo Treeview. Also I have Angular's deactivate guard which shows modal "Do you want to close this page without saving?" on routing change. When i try to change item in Kendo TreeView, selection change (only color of selected item, not route) even if i choose 'Cancel' option. 

So what i need is to prevent selection change untill modal is confirmed. Is it possible?

Regards
Bartosz

[Dimiter Topalov]

Hello Bartosz,

Thank you for the clarification.

I have one more question - as the Ticket Info --> Product section suggests the question is about the Kendo UI for Angular TreeView, but the provided code suggests using the Kendo UI for jQuery TreeView and the respective AngularJS (v 1.x) directives - demo, can you please specify which suite are you using so that the question can be answered by the team, responsible for developing and supporting the respective suite and the response will be most comprehensive with aspect to the specific framework (Angular vs AngularJS 1.x and Kendo suite - Kendo UI for Angular vs Kendo UI for jQuery).

Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Bartosz]

Provided code was just simple example of the problem, sorry for confusion.

I'm using Angular 5 and Kendo UI for Angular.

 

[Bartosz]

Provided code was just simple example of the problem, sorry for confusion.

I'm using Angular 5 and Kendo UI for Angular

[Dimiter Topalov]

Hi Bartosz,

Thank you for further specifying the context. The most straight-forward approach that comes to mind would be to separate the click and change events and only trigger the change event after the respective confirmation comes.

For example, you can use Node templates to render the desired clickable content, handle the click to trigger the confirmation, and proceed with selecting the clicked item programmatically/navigating and executing any other logic, related to user confirming the prompt/Dialog.

Here is a sample implementation of the described approach:

https://stackblitz.com/edit/angular-woeeag-zvhjdu?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Bartosz]

Thanks Dimiter, this is exactly what I needed!