New to Kendo UI for jQuery? Start a free 30-day trial

Actions

configuration

A collection of objects containing text, action and primary attributes used to specify the dialog buttons.

actions

Array

<div id="dialog"></div>
<script>
    $("#dialog").kendoDialog({
      title: "Kendo Dialog Component",
      content: "This is your Kendo Dialog.",
      actions: [{
          text: "OK",
          action: function(e){
              // e.sender is a reference to the dialog widget object
              // OK action was clicked
              // Returning false will prevent the closing of the dialog
              return false;
          },
          primary: true
      },{
          text: "Cancel"
      }]
    });
</script>

actions.action

Function

The callback function to be called after pressing the action button.

<div id="dialog"></div>
<script>
    $("#dialog").kendoDialog({
      title: "Kendo Dialog Component",
      content: "This is your Kendo Dialog.",
      actions: [{
          text: "OK",
          action: function(e){
              // e.sender is a reference to the dialog widget object
              alert("OK action was clicked");
              // Returning false will prevent the closing of the dialog
              return true;
          },
      }]
    });
</script>

actions.cssClass

String

Adds a custom class to the action button.

<div id="dialog"></div>
<script>
    $("#dialog").kendoDialog({
      title: "Kendo Dialog Component",
      content: "This is your Kendo Dialog.",
      actions: [{
          text: "OK",
          primary: true,
          cssClass: "myClass"
      }]
    });
</script>

  <style>
	  .myClass{
		  background-color: green !important;
	  }
  </style>

actions.fillMode

String

Controls how the color is applied to the button. Valid values are: "solid", "outline", "flat", "link", and "none". Default value is "solid".

Default: 'solid'

<div id="dialog"></div>
<script>
    $("#dialog").kendoDialog({
      title: "Kendo Dialog Component",
      content: "This is your Kendo Dialog.",
      actions: [
        { text: "OK"},
        { text: "Cancel", themeColor: "error", fillMode: "outline"}
      ]
    });
</script>

Defines a name of an existing icon in the Kendo UI theme sprite. The icon will be applied as background image of a span element inside the action button. For a list of available icon names, please refer to the List of Icons.

<div id="dialog"></div>
<script>
    $("#dialog").kendoDialog({
      title: "Kendo Dialog Component",
      content: "This is your Kendo Dialog.",
      actions: [
        { text: "OK"},
        { text: "Delete", themeColor: "error", icon: "trash" }
      ]
    });
</script>

actions.iconClass

String

Defines a CSS class - or multiple classes separated by spaced - which are applied to a span element inside the action button. Allows the usage of custom icons.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
<div id="dialog"></div>
<script>
    $("#dialog").kendoDialog({
      title: "Kendo Dialog Component",
      content: "This is your Kendo Dialog.",
      actions: [
        { text: "OK"},
        { text: "Archive", themeColor: "primary", iconClass: "fas fa-archive" }
      ]
    });
</script>

actions.primary

Boolean

A boolean property indicating whether the action button will be decorated as primary button or not.

<div id="dialog"></div>
<script>
    $("#dialog").kendoDialog({
      title: "Kendo Dialog Component",
      content: "This is your Kendo Dialog.",
      actions: [{
          text: "OK",
          primary: true
      }]
    });
</script>

actions.rounded

String

Controls what border radius is applied to an action button. Valid values are: "small", "medium", "large", "full", and "none". Default value is "medium".

Default: 'medium'

<div id="dialog"></div>
<script>
    $("#dialog").kendoDialog({
      title: "Kendo Dialog Component",
      content: "This is your Kendo Dialog.",
      actions: [
        { text: "OK"},
        { text: "Cancel", themeColor: "error", rounded: "full" }
      ]
    });
</script>

actions.size

String

Controls the overall physical size of an action button. Valid values are: "small", "medium", "large", and "none". Default value is "medium".

Default: 'medium'

<div id="dialog"></div>
<script>
    $("#dialog").kendoDialog({
      title: "Kendo Dialog Component",
      content: "This is your Kendo Dialog.",
      actions: [
        { text: "OK"},
        { text: "Cancel", themeColor: "error", size: "large" }
      ]
    });
</script>

actions.text

String

The text to be shown in the action's button.

<div id="dialog"></div>
<script>
    $("#dialog").kendoDialog({
      title: "Kendo Dialog Component",
      content: "This is your Kendo Dialog.",
      actions: [{
          text: "OK",
      }]
    });
</script>

actions.themeColor

String

Controls the main color applied to the action button. Valid values are: "base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "inverse", and "none". Default value is "base".

Default: 'secondary'

<div id="dialog"></div>
<script>
    $("#dialog").kendoDialog({
      title: "Kendo Dialog Component",
      content: "This is your Kendo Dialog.",
      actions: [
        { text: "OK"},
        { text: "Cancel", themeColor: "error" }
      ]
    });
</script>