Getting Started with the Dialog
This guide demonstrates how to get up and running with the Kendo UI for jQuery Dialog.
After the completion of this guide, you will be able to achieve the following end result:
<button id="open">Open Dialog</button>
<div id="dialog"></div>
<script>
$("#dialog").kendoDialog({
title: "Kendo Dialog Component",
content: "This is your Kendo Dialog.",
actions: [{
text: "OK",
primary: true
}, {
text: "Cancel"
}],
animation: {
open: {
effects: "fade:in"
},
close: {
effects: "fade:out"
}
}
});
$("#dialog").data("kendoDialog").open();
$("#open").on("click", () => $("#dialog").data("kendoDialog").open());
</script>
1. Create a div Element
First, create a <div> element on the page from which the Dialog component will be initialized.
<div id="dialog"></div>
2. Initialize the Dialog
In this step, you will initialize the Dialog from the <div> element. When you initialize the component, all settings of the Dialog will be provided in the script statement. You have to describe its layout, configuration and event handlers in JavaScript.
<div id="dialog"></div>
<script>
$("#dialog").kendoDialog({
title: "Kendo Dialog Component",
content: "This is your Kendo Dialog."
});
</script>
3. Render Action Buttons
The Dialog enables you to render action buttons for the user under its content by setting its action configuration.
<div id="dialog"></div>
<script>
$("#dialog").kendoDialog({
title: "Kendo Dialog Component",
content: "This is your Kendo Dialog.",
actions: [{
text: "OK",
primary: true
}, {
text: "Cancel"
}]
});
</script>
4. Add Open and Close Animations
The Dialog enables you to change the default open and close animations of the component.
<div id="dialog"></div>
<script>
$("#dialog").kendoDialog({
title: "Kendo Dialog Component",
content: "This is your Kendo Dialog.",
actions: [{
text: "OK",
primary: true
}, {
text: "Cancel"
}],
animation: {
open: {
effects: "fade:in"
},
close: {
effects: "fade:out"
}
}
});
</script>
5. Show the Dialog on Button Click
You can use the open method of the Dialog to programmatically show the component.
$("#dialog").data("kendoDialog").open();