Prevent Action for Kendo Window

[Austin]

Is there a way that we can prevent the close action of a Kendo Window? The example use case is a "CRUD" form, where a user enters many different fields of data. After changing values and clicking the "Close" button of the window, we would like to prompt the user with a message that says "You have unsaved changes, are you sure you wish to continue?" This allows the user to stop closing the window without losing data, if they forgot to save their changes. 

We are using the WindowService to open windows dynamically. I see that there is a "preventAction" available in the DialogService (https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/#toc-action-prevention), but no equivalent option appears to be available in the WindowService.

Is there a way to accomplish the "action prevention" function in a Kendo Window opened through the WindowService? I would be open to alternative solutions if there is no built-in support for this.

 

Austin Brown, Software Development Engineer Team Lead
B&L Information Systems
e: [e-mail]
p: 269.465.6207 ext 333
a: 4707 Rambo Road, Bridgman MI 49106

[Svet]

Hi Austin,

Indeed, the required functionality is currently unavailable for the Window as opposed to the Dialog. That is why I created a new feature request in our public Feedback Portal where we will track the demand for such functionality:

https://feedback.telerik.com/kendo-angular-ui/1475974-provide-a-feature-that-allow-preventing-the-actions

that will allow us to prioritize our future development plans and add the specific feature to one of our future releases.

What could be done at the moment is to use a custom action instead of the built-in kendoWindowCloseAction and intercept its generic (click) event. That will allow the developer to close the Window manually by calling the close() method of the WindowRef. Here is an example demonstrating such approach:

https://stackblitz.com/edit/angular-15sjt2-xfhwma?file=app%2Fapp.component.ts

The essential parts are highlighted below:

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <button (click)="showWindow()" class="k-button k-button-icontext k-primary">
        <span class="k-icon k-i-delete"></span> Delete user
      </button>
    </div>

      <ng-template #windowTitleBar let-win>
          <div class="k-window-title">Custom TitleBar</div>
          <button kendoWindowRestoreAction [window]="win"></button>
          <button kendoWindowMaximizeAction [window]="win"></button>
          <button kendoWindowCloseAction [window]="win" (click)="onClose($event)"></button>
          <button class="k-button-icon k-button k-bare" (click)="onClose($event)">
            <span class="k-icon k-i-close" role="presentation"></span>
          </button>
      </ng-template>

    <div kendoWindowContainer></div>
  `
})
export class AppComponent {
  @ViewChild('windowTitleBar', {static: false}) title;
  constructor( private windowService: WindowService ) {}

  public windowRef;

  public showWindow() {
      this.windowRef = this.windowService.open({
          titleBarContent: this.title,
          content: UserInfoComponent,
          width: 250
      });

      const userInfo = this.windowRef.content.instance;
      userInfo.name = 'admin';
      userInfo.age = 42;
  }

  onClose(e){

    this.windowRef.close();
  }
}

Another option would be to use some custom JavaScript in order to intercept the click event of the element representing the close button. Please check the following example demonstrating such approach:

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

The drawback of this approach is that a setTimeout function should be called after some minimal time in order to ensure that the required close button will be rendered in the DOM at the time of extracting it with the generic JavaScript document.querySelector() function:

      setTimeout(()=>{
        document.querySelector('button span.k-i-close').addEventListener('click', (e)=>{
          console.log(e);
          e.stopImmediatePropagation();
        }, true)
      },300)

Please check the suggested approaches and let us know in case any further information or assistance is required for this case. Thank you.

Regards,
Svetlin
Progress Telerik