Drag-and-drop inside Window

4 posts, 0 answers
  1. Sergey
    Sergey avatar
    1 posts
    Member since:
    Mar 2009

    Posted 03 May 2012 Link to this post

    Hello,

    When draggable element is inside Window widget, then it drags before the window for first 3 times only. Starting from 4th drag-and-drop operation, it drags behind the Window widget. Have a look at the sample code:

    <body>
        <div id="windowTest" >
            <div id="divToDrag" style="width:50px;height:50px;background:yellow;" ></div>
        </div>
     
        <script>
            $(document).ready(function () {          
                $("#windowTest").kendoWindow({
                    width: "200px",
                    height: "100px"
                });
     
                $("#divToDrag").kendoDraggable({
                    hint: function (element) {
                        return element.clone();
                    }
                });
            });
        </script>
    </body>


    The problem cause is the following: the dragging element z-index is 10010, but the Window z-index increases from 10003 by 2 every time the drag started. So, for the first drag-and-drop operations, the Window z-index is 10005, 10007, 1009. For the 4th drag-and-drop the z-index became 10011, and the dragging element drags behind the Window.

    Can you please suggest me how to fix this problem?

    Thanks,
      Sergey

  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2094 posts
    Member since:
    Sep 2012

    Posted 04 May 2012 Link to this post

    Hello Sergey,

    The problem with the ever-rising window z-index has been fixed in the latest internal build.

    Kind regards,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  3. kurt place
    kurt place avatar
    8 posts
    Member since:
    Aug 2012

    Posted 28 Feb in reply to Alex Gyoshev Link to this post

    I am experiencing a similar issue.  I have several windows on the same one page app and as I open and close one and then open the other the z-index climbs.  The problem is that we use a rad drop down and the drop down portion's z-index does not change.  after about 20 opens the z-index of the window climbs past the z-index of the drop down then the drop down is hidden.  

    I cannot post code as it is too large but I can give a demo as our software is online.  https://https://onlinestage.greatergiving.com/ username: apdemo.telerikdemo, password: Password123.  Click the Go Time link and click on Checkin Attendee button.  Pick any name from the dropdown and click Next.  Click the Sell New button and inspect the z-index of that window, it should be 10005.  then click cancel and click Use Existing, that z-index will be 10007.  Click cancel again and go back to Sell New and that z-index will be 10009.  this app gets used heavily without closing so after a while the dropdowns in the window end up behind the window.

  4. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2094 posts
    Member since:
    Sep 2012

    Posted 04 Mar Link to this post

    Hello Kurt,

    I could not log in to the site. However, the issue can be resolved by adding a handler for the activate event of the window, and updating the z-index of the drop-down list via jQuery:

    activate: function() {
        // update z-index of the drop-downs here
    }

    Regards,
    Alex Gyoshev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Back to Top