Window - prevent drag on pinned
Environment
Product | Progress® Kendo UI® Window for jQuery |
Product Version | Created with the 2021.1.330 version |
Description
How do I disable the drag event of the Window, when the pin action is active?
Solution
- Set up the Pin action
- Subscribe to the
dragstart
event and define its handler - In the handler check whether e.sender.options.pinned is true
- If true prevent the event - e.preventDefault()
<div id="example">
<div id="window">
<h4>Armchair 402</h4>
<div class="armchair"><img src="../content/web/window/armchair-402.png" alt="Armchair 402" /> Artek Alvar Aalto - Armchair 402</div>
<p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p>
<p>Source: <a href="https://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a></p>
</div>
<span id="undo" style="display:none" class="k-button hide-on-narrow">Click here to open the window.</span>
<div class="responsive-message"></div>
<script>
$(document).ready(function() {
var myWindow = $("#window"),
undo = $("#undo");
undo.click(function() {
myWindow.data("kendoWindow").open();
undo.fadeOut();
});
function onClose() {
undo.fadeIn();
}
myWindow.kendoWindow({
width: "600px",
title: "About Alvar Aalto",
visible: false,
dragstart: function (e) {
if (e.sender.options.pinned) {
e.preventDefault();
}
},
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
close: onClose
}).data("kendoWindow").center().open();
});
</script>