Last Updated: 18 Feb 2022 13:36 by ADMIN
Fangchun Lim
Created on: 03 Sep 2021 06:53
Category: Kendo UI for jQuery
Type: Bug Report
Window modal overlay is removed in case a nested modal Window is closed and draggable.containment is set

Bug report
Window modal overlay missing when using KendoWindow that has the following configuration fo window1

modal: true,

draggable: {containment: "body"}


I aware that there is this forum talking about this issue, but the example is opeining both window without draggable.containment configuration.

The current easist workaround is dont set draggable.containment for window1

Reproduction of the problem
1. Run this dojo

2. Open window1, then open window2, close window2

3. The modal overlay for window1 dissapeared

Current behavior
When window1 has configuration for draggable.contaiment, its modal overlay will dissapear after window2 closed

Expected/desired behavior
The modal overlay for window1 should remain, closing window2 should not affect window1's modal overlay

Kendo UI version: 2021.2.616
jQuery version: 3.4.1
Browser: all

Posted on: 09 Sep 2021 13:18

Hi Fangchun Lim,

Thank you very much for reporting the issue. That is a regression bug in Kendo starting with version 2021.1.224. Please keep following the thread for information on when it will be fixed.

I am updating your Telerik Points as a token of gratitude for reporting the bug.

Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at

Fangchun Lim
Posted on: 03 Sep 2021 09:12

I have found a workaround for this, very hacky way. Attach a listener to the dragstart event, and overwrite the min/max boundary.
The max boundary should be the containment demension - the window wrapper dimension.
The reason i wrap them in a setTimeout() is because kendo will recalculate the min/max boundary after dragstart() event.
A delay here to make the code runs after kendo recalculation and overwrite the boundary


   // other Kendo window configs...

   dragstart: (e) => {
          const widget = e.sender;
          setTimeout(() => {
            widget.minLeft = 0;
            widget.minTop = 0;
            widget.maxTop = $("body").height() - widget.wrapper.outerHeight();
            widget.maxLeft = $("body").width() - widget.wrapper.outerWidth();
          }, 1);