Dynamically re-position Kendo Window for Angular

9 posts, 1 answers
  1. Jyothi
    Jyothi avatar
    33 posts
    Member since:
    Dec 2018

    Posted 25 Feb 2019 Link to this post

    Hi, any one know how to dynamically re-position the Kendo-window in Angular 6?

    When I move the Kendo-window it goes below the navigation bar. I would like to prevent that.

     

    Regards.

  2. Answer
    Svetlin
    Admin
    Svetlin avatar
    390 posts

    Posted 27 Feb 2019 Link to this post

    Hi Jyothi,

    We can handle the (dragEnd) event of the Window and check its left and top positions. If the positions do not meet a certain condition we can change them programmatically. Check the following example demonstrating this approach:
    https://stackblitz.com/edit/angular-ebheqx?file=app/app.component.ts

    I hope this helps.

    Regards,
    Svetlin
    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.
  3. Jyothi
    Jyothi avatar
    33 posts
    Member since:
    Dec 2018

    Posted 27 Feb 2019 in reply to Svetlin Link to this post

    Hi Svetlin,

    That was really helpful.  Thank you.

    Regards,

    Jyothi

  4. Rajesh
    Rajesh avatar
    15 posts
    Member since:
    Aug 2018

    Posted 09 May 2019 Link to this post

    Hi Svetlin,

    The window is re positioned to the defined offset on dragEnd. This looks good.

    Instead of dragEnd, i tried to check the left and top positions while the window is being dragged itself. So that i can restrict the window moving within the container (Just to avoid the window going beyond the container and re positioning on dragEnd).

    For that i used leftChange/topChange events instead of dragEnd with same logic given in the below link

    https://stackblitz.com/edit/angular-ebheqx?file=app/app.component.ts

    top property works fine, but the left property is not honoring the reset value and still going beyond the container event after resetting the value.

    I used the same logic as in dragEnd of your example but with leftChange/topChange events. Any issue with left property ?

    My sample code below.

    <kendo-window (topChange)="onwindowPositionChange()" (leftChange)="onwindowPositionChange()" [(left)]="left" [(top)]="top" title="Please provide additional data" *ngIf="opened" (close)="close()" [width]="width" [height]="height">

    public offset = 50;
    public left = this.offset;
    public top = this.offset;
    public width = 400;
    public height = 350;
    public opened = true;
    public dataSaved = false;

    onwindowPositionChange()
    {
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;
    const positionTop = windowHeight - this.height - this.offset;
    const positionRight = windowWidth - this.width - this.offset

    if(this.top < this.offset){
    this.top = this.offset;
    }
    if(this.top > positionTop){
    this.top = positionTop;
    }
    if(this.left < this.offset){
    this.left = this.offset;
    }
    if(this.left > positionRight){
    this.left = positionRight;
    }
    }

    Thanks in advance,

    Rajesh

  5. Svetlin
    Admin
    Svetlin avatar
    390 posts

    Posted 10 May 2019 Link to this post

    Hi Rajesh,

    Indeed, the recently created how-to article demonstrating an example how to re-position the Window dynamically:
    https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/window/how-to/dynamically-reposition-window/

    could be adjusted so that it uses the (leftChange) and (topChange) events instead of the (dragEnd). However, in order for this approach to function as expected we will need to use a setTimeout function each time we want to re-position the Window, which will lead to a visual defect of constant flashing as the Window component will have to be re-rendered every time the (leftChange) or (topChange) event fires. Check the following example demonstrating this scenario:
    https://stackblitz.com/edit/angular-f7nhhj?file=app/app.component.ts

    I hope it illustrates the desired approach. Let me know in case I am missing something or further assistance is required for this case.

    Regards,
    Svetlin
    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.
  6. Rajesh
    Rajesh avatar
    15 posts
    Member since:
    Aug 2018

    Posted 10 May 2019 in reply to Svetlin Link to this post

    Hi Svetlin,

    Thanks for the information.I will use either dragEnd (or) leftChange/topChange which ever looks good

    I need one information regarding kendo window. I have to achieve this functionality for a kendo window whose width is fixed, but height varies each time depending on the selection of items. (We have list of records in a grid. A kendo window is displayed when select a record in grid. So the data and height of window varies for each item)

     

    For re positioning the window, we need the current height of the window. Is there any way to get the current window height dynamically ?

  7. Svetlin
    Admin
    Svetlin avatar
    390 posts

    Posted 14 May 2019 Link to this post

    Hi Rajesh,

    In order to keep the history of the forum clean, I opened a new ticket on your behalf regarding the last requirement: 

    Regards,
    Svetlin
    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.
  8. congdongdientu.
    congdongdientu. avatar
    5 posts
    Member since:
    May 2018

    Posted 27 Jul Link to this post

    And how about the dynamically re-position for window kendo service

    How to set the offset for this ?

    public showValuationReport(dataItem) {
        document.body.style.overflow = "hidden";
        this.bgOverlayOpened = true;
        const windowRef = this.windowService.open({
          title: 'Valuation Report',
          content: PaperworkViewerComponent,
          // appendTo: this.containerRef,
          // top: 12,
          // left: 12
        });
        const window: PaperworkViewerComponent = windowRef.content.instance;
        const reportOptions = {
          reportType: '',
          reportName: 'VehicleInfoSheet',
          stockId: dataItem.stockId,
          branchId: dataItem.branchId,
        }
        window.reportOptions = reportOptions;
        windowRef.result.subscribe(result => {
            if (result instanceof WindowCloseResult) {
              this.bgOverlayOpened = false;
              document.body.style.overflow = "";
            } else { }
        })
      }

  9. Svetlin
    Admin
    Svetlin avatar
    390 posts

    Posted 29 Jul Link to this post

    Hi,

    What could be done when using the Angular service to open the Window is to change the values passed to the top and left properties of the window instance once created:

      public openWindow() {
          const window: WindowRef = this.windowService.open({
              title: 'My Window',
              content: 'My Content!',
              width: 450,
              height: 200
          });
    
          window.window.instance.left = 0;
          window.window.instance.top = 0;
    
    
          window.result.subscribe((result) => {
              if (result instanceof WindowCloseResult) {
                  console.log('Window was closed!');
              }
          });
      }


    Please check the following example demonstrating such approach:

    https://stackblitz.com/edit/angular-weq4zz?file=app/app.component.ts

    I hope this helps.

    Regards,
    Svetlin
    Progress Telerik

Back to Top