cancellable switch?

[Clifford]

I have a switch and I want to confirm with the user that they want to perform the action. Is there any way to return false and have the switch not change if the user clicks cancel?

[Hetali]

Hello Clifford,

In order to change the Kendo UI Switch value only when the user confirms, use the valueChange event and open a DialogService which will ask for user's confirmation and based on the selection the value will or will not change. For example:

<kendo-switch [(ngModel)]="checked" (valueChange)="change($event)">
</kendo-switch>

<div kendoDialogContainer></div>

change(e) {
  setTimeout(() => {
    this.checked = !e;
    const dialog: DialogRef = this.dialogService.open({
      title: "Please confirm",
      content: "Are you sure?",
      actions: [{ text: "No" }, { text: "Yes", primary: true }],
      width: 300,
      height: 200,
      minWidth: 250
    });
    dialog.result.subscribe(result => {
      if (result instanceof DialogCloseResult) {
        this.checked = !e;
      } else if (result.text == "No") {
        this.checked = !e;
      } else {
        this.checked = e;
      }
    });
  });
}

In this StackBlitz example, the Switch value only changes when the user confirms.

Please let me know if this helps or if you have any further questions pertaining to this case.

Regards,
Hetali
Progress Telerik

[Clifford]

Ok, makes sense that if I was using ngModel it would work. In my case It's in a grid and I'm using the [checked] property instead.

[Hetali]

Hello Clifford,

To show the confirmation dialog when the user changes the Kendo UI Switch value using the checked property, please use the following custom function:

 

<kendo-switch [checked]="checked"></kendo-switch>
<div kendoDialogContainer></div>

 

 

constructor(private dialogService: DialogService, private ngZone: NgZone) {}
public checked: boolean = true;

ngAfterViewInit() {

  // Add a click event to write the custom function 
  var a = document.getElementsByClassName("k-switch-handle")[0];
  var b = document.getElementsByClassName("k-switch-label-on")[0];
  var c = document.getElementsByClassName("k-switch-label-off")[0];

  a.addEventListener("click", this.customClick);
  b.addEventListener("click", this.customClick);
  c.addEventListener("click", this.customClick);
}

customClick = (e: MouseEvent) => {
  e.stopPropagation();  // To stop the propagation of the click event and avoid the default behavior
  const dialog: DialogRef = this.dialogService.open({
    title: "Please confirm",
    content: "Are you sure?",
    actions: [{ text: "No" }, { text: "Yes", primary: true }],
    width: 300,
    height: 200,
    minWidth: 250
  });
  dialog.result.subscribe(result => {
    if (result instanceof DialogCloseResult) {
    } else if (result.text == "No") {
    } else {
      this.change(!this.checked)   // Change the value if the user selects Yes
    }
  });
}

change(e) {
  this.ngZone.run(() => {  // Use ngZone to update the checked value
    this.checked = e;
  });
}

 

In this updated StackBlitz example, the Kendo UI Switch shows the confirmation dialog before changing the checked value.

Please give it a try and let me know if this helps. Let me know in case you have any further questions.

Regards,
Hetali
Progress Telerik