This is a migrated thread and some comments may be shown as answers.

kendoWindow containment jumpy

2 Answers 13 Views
Window
This is a migrated thread and some comments may be shown as answers.
CHRISTOPHER
Top achievements
Rank 1
CHRISTOPHER asked on 05 Feb 2020, 08:35 PM

Our application is card based with user driven exact positioning and it works extremely well with one small bug I have duplicated with the latest build in the dojo.

https://dojo.telerik.com/ameFOTij

You can move the top left card around just fine.  However, the first time you attempt to drag one of the other cards, it either becomes temporarily invisible or it jumps to another portion of the screen.  After that, you can move that same card around without any issues.

Any thoughts on how I could fix this?  It was an issue in the previous build as well.

2 Answers, 1 is accepted

Sort by
0
CHRISTOPHER
Top achievements
Rank 1
answered on 07 Feb 2020, 02:15 PM
I found the issue.  If you set the top and/or left as a "px" number at runtime, you get this funky behavior.  I switched to a standard number and it works just fine.  I removed our code from the dojo.
0
Aleksandar
Telerik team
answered on 07 Feb 2020, 02:27 PM

Hi Christopher,

I reviewed the provided dojo and the behavior appears to be caused by configuring the position of the Window through its parent element. Configuring the position of the Kendo Window via its own properties - height, width, position top and position left resolves the issue observed: 

function (){
    var pageLayoutItem = list[i];

    $(pageLayoutItem.ID).kendoWindow(
      {
        animation: false,
        visible: false,
        draggable: {
          containment: pageLayoutContainerID,
        },
        title:  pageLayoutItem.Description,
        actions: ["Minimize", "Maximize", "Pin"],
        position:{
          top:pageLayoutItem.Top,
          left:pageLayoutItem.Left,
        },
        width:pageLayoutItem.Width,
        height:pageLayoutItem.Height
      });

    var win = $(pageLayoutItem.ID).data("kendoWindow").open();

    win.element.css("zIndex", pageLayoutItem.ZIndex);

    if(pageLayoutItem.IsMinimized) {  win.minimize();  }
    if(pageLayoutItem.IsPinned) {  win.pin();  }
  }

You could review the updated dojo here. Let me know if you have other questions.

Regards,
Aleksandar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Window
Asked by
CHRISTOPHER
Top achievements
Rank 1
Answers by
CHRISTOPHER
Top achievements
Rank 1
Aleksandar
Telerik team
Share this question
or