kendoWindow containment jumpy

3 posts, 0 answers
  1. CHRISTOPHER
    CHRISTOPHER avatar
    12 posts
    Member since:
    Jul 2017

    Posted 05 Feb 2020 Link to this post

    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. CHRISTOPHER
    CHRISTOPHER avatar
    12 posts
    Member since:
    Jul 2017

    Posted 07 Feb 2020 in reply to CHRISTOPHER Link to this post

    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.
  3. Aleksandar
    Admin
    Aleksandar avatar
    267 posts

    Posted 07 Feb 2020 Link to this post

    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.
Back to Top