Action Buttons

The Dialog provides options for rendering action buttons and customizing their content.

To specify action buttons in the Dialog, use the dialog-actions-bar element.

<div id="vueapp" class="vue-app">
            <div>
                  <span v-if="!visibleDialog">
                      <button class="k-button" @click="toggleDialog">Open Dialog</button>
                  </span>
              <k-dialog v-if="visibleDialog" :title="'Delete Data'" @close="toggleDialog">
                  <p :style="{ margin: '25px', textAlign: 'center' }">This action cannot be undone.</p>
                  <dialog-actions-bar>
                      <button class="k-button" @click='toggleDialog'>Cancel</button>
                      <button class="k-button" @click='onDeleteData'>Delete</button>
                  </dialog-actions-bar>
              </k-dialog>
          </div>
</div>
import { Dialog, DialogActionsBar } from '@progress/kendo-vue-dialogs';
Vue.component('k-dialog', Dialog);
Vue.component('dialog-actions-bar', DialogActionsBar);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            visibleDialog: false
        };
    },
    methods: {
      toggleDialog() {
          this.visibleDialog = !this.visibleDialog;
      },
      onDeleteData() {
            alert("Data deleted.");
            this.visibleDialog = !this.visibleDialog;
      }
    }
});

In this article