Kendo confirm jQuery to Aurelia

Question

I'm trying to re-order the buttons on a KendoUI confirm dialog. Telerik support supplied a jQuery example, but I can't seem to get the syntax in Aurelia correct.

I have this, which lets me put the buttons in the order I want:

  
 
  
  
  
 
   
 
    
        confirm(message: string, title?: any): JQueryPromise<any> {        
            message = this.javaScriptCommentToHTML(message);
            title = this.checkForTitle(title);
            let dialog = $('<div></div>').appendTo(document.body);
            let kConfirm: kendo.ui.Confirm;
            let options: any = {
                buttonLayout: 'normal',
                title: title,
                content: message,
                actions: [
                    {
                        text: "Cancel",
                        primary: false,
                        cssClass: "k-button-cancel",
                        action: function (e) {
                            //  What goes here to trigger cancel action???
                        }
                    },
                    {
                        text: "OK",
                        primary: true,
                        cssClass: "k-button-ok",
                        action: function (e) {
                            //  What goes here to trigger OK action???
                        }
                    }
                ],
                close: function (e) {
                    kConfirm.wrapper.remove();
                }
            };
            kConfirm = dialog.kendoConfirm(options).data('kendoConfirm');
            kConfirm.open();
            return kConfirm.result;
        }
 
   
 
  

But I don't know what to put in the button action to trigger the default "OK" and "Cancel" actions. The sample Telerik is this, but they are using a "secondaryButtonCloseFunction" and "primaryButtonCloseFunction" which I can't get Aurelia to recognize.

  
 
  
  
  
 
   
 
    
           function showConfirm(message, options) {
              if (options === undefined) {
                options = new Object();
              }
              var dialog = $("#confirm-dialog");
              dialog.kendoDialog({
                closable: false,
                content: message,
                title: options.title || 'Confirm',
                width: options.width || 400,
                height: options.height || 200,
                modal: true,
                buttonLayout: "normal",
                actions: [{
                  text: options.secondaryButtonText || 'Cancel',
                  action: options.secondaryButtonCloseFunction || function () { 
                    alert("No clicked")
                  }
                },
                {
                  text: options.primaryButtonText || 'OK',
                  action: options.primaryButtonCloseFunction || function () { 
                    alert("Yes clicked")
                  },
                  primary: true
                }]
              });
              dialog.data("kendoDialog").open();
            }
 
   
 
  

Their example uses a generic Object for "options" and I tried declaring a separate object to contain those "xxButtonCloseFunction" properties which gets me past Aurelia compile errors, but it doesn't do anything.

thanks!

Answer 1

Telerik came back with a CSS solution to switch the button order. Maybe this will be useful to someone else!

.k-dialog-buttongroup .k-button:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
display: flex;
justify-content: flex-end;
}
.k-dialog-buttongroup .k-button:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    order: -1;
}