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

Window - prevent drag on pinned

Environment

Product Progress Kendo UI Window
Progress Kendo UI 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

  1. Set up the Pin action
  2. Subscribe to the dragstart event and define its handler
  3. In the handler check whether e.sender.options.pinned is true
  4. 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>
In this article
Not finding the help you need? Improve this article