actionsArray
A collection of objects containing text, action and primary attributes used to specify the dialog buttons.
Example
<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.textString
The text to be shown in the action's button.
Example
<div id="dialog"></div>
<script>
$("#dialog").kendoDialog({
title: "Kendo Dialog Component",
content: "This is your Kendo Dialog.",
actions: [{
text: "OK",
}]
});
</script>actions.actionFunction
The callback function to be called after pressing the action button.
Example
<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.primaryBoolean
A boolean property indicating whether the action button will be decorated as primary button or not.
Example
<div id="dialog"></div>
<script>
$("#dialog").kendoDialog({
title: "Kendo Dialog Component",
content: "This is your Kendo Dialog.",
actions: [{
text: "OK",
primary: true
}]
});
</script>actions.cssClassString
Adds a custom class to the action button.
Example
<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.themeColorString(default: 'secondary')
Controls the main color applied to the action button. Valid values are: "base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse", and "none". Default value is "base".
Example
<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>actions.sizeString(default: 'medium')
Controls the overall physical size of an action button. Valid values are: "small", "medium", "large", and "none". Default value is "medium".
Example
<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.roundedString(default: 'medium')
Controls what border radius is applied to an action button. Valid values are: "small", "medium", "large", "full", and "none". Default value is "medium".
Example
<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.fillModeString(default: 'solid')
Controls how the color is applied to the button. Valid values are: "solid", "outline", "flat", "link", and "none". Default value is "solid".
Example
<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>actions.iconString
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.
Example
<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.iconClassString
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.
Example
<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>