Bug report

When there are multiple modal windows on the page and the user tries to navigate using Tab key, the focus is not trapped in the window and elements on the browser become focused.

Reproduction of the problem

1. Open the Dojo example. https://dojo.telerik.com/@NeliKondova/iyULiwiQ
2. Press Tab key multiple times - the focus is always inside the window.
3. Click the openConfirmWindow button in the first modal window.
4. Close the second modal window.
5. Press Tab key multiple times.

Current behavior

When there is a second window on the page the focus is not trapped in the window and elements outside the window are focused.

Expected/desired behavior

The focus should be trapped in the window.

Environment

• Kendo UI version: 2023.2.606
• Browser: [all]

Hi

its not an urgent request as I implemented that feature already. However, I am not a good prgrammer and I would like to have this feature included by more skilled programmers.
Basically our GUI shows the data table as shown in the attached image. Now you can open quite a lot of floating windows and subwindows to work on the data. See second attachment. As this is sometimes confusing, we allow to dock/undock the windows on the left or right side of the table, depending on the relative position while clicking the dock button.

Kind regards

Alex

Bug report

The Grid Edit Window does not take all the space when maximized on mobile device with Android 12.

Reproduction of the problem

1. Open this example on a mobile device that has Android 12.
2. Scroll down to the bottom of the page.
3. Edit the last row.

Current behavior

The Window leaves some space at the bottom of the screen.

Video:
https://user-images.githubusercontent.com/20702110/197784930-bd867230-3815-4393-a201-ae3d10d1f718.mp4

Expected/desired behavior

The Window should take all the screen space

Environment

• Kendo UI version: 2022.3.913
• Browser: [Chrome on Android 12 mobile device]

Hi Team,

I'd like a way to configure the API so that the overlay which appears during resizing can be turned off. 

Thank you!

Hello,

I think i have found a potential bug

In the dojo below please run it and notice the window opens fine, then close and reopen it a couple of times.

The animation => open: false is causing the window to reopen at a smaller/zoomed out size. 

If you move the window it snaps to the correct size

https://dojo.telerik.com/oDuviZak/2

When opening a Window with modal and preventScroll: true on a page with scroll bars, the scroll position resets every time the window is opened and closed.

This is demonstrated in the Dojo example linked here. In the Dojo, scroll to the bottom and click the button to open the Window, the scroll position will change. 

Making the following modifications to the kendo.window.js file maintains the scroll position; would it be possible to add these modifications to a future release?

The code starts around line 912 of kendo.window.js

_stopDocumentScrolling: function () {
                var that = this;
                var containment = that.containment;
                if (containment && !that._isPinned) {
                    that._storeOverflowRule(containment);
                    containment.css(OVERFLOW, HIDDEN);
                    that.wrapper.css({
                        maxWidth: containment.innerWidth(),
                        maxHeight: containment.innerHeight()
                    });
                    return;
                }
                var $body = $('body');
                that._storeOverflowRule($body);
                $body.css(OVERFLOW, HIDDEN);
                // LSS: maintain scroll position when opening modal popup window
                var $html = $('html'),
                    scrollTop = $html.scrollTop();
                that._storeOverflowRule($html);
                $html.css(OVERFLOW, HIDDEN);
                // LSS: maintain scroll position when opening modal popup window
                $html.add($body).scrollTop(scrollTop);
            },
            _enableDocumentScrolling: function () {
                var that = this;
                var containment = that.containment;
                if (containment && !that._isPinned) {
                    that._restoreOverflowRule(containment);
                    that.wrapper.css({
                        maxWidth: containment.width,
                        maxHeight: containment.height
                    });
                    return;
                }
                that._restoreOverflowRule($(document.body));
                that._restoreOverflowRule($('html'));
            },
            _storeOverflowRule: function ($element) {
                if (this._isOverflowStored($element)) {
                    return;
                }
                var overflowRule = $element.get(0).style.overflow;
                if (typeof overflowRule === 'string') {
                    $element.data(DATADOCOVERFLOWRULE, overflowRule);
                    // LSS: maintain scroll position when opening modal popup window
                    $element.data('scrollTop', $element.scrollTop());
                }
            },
            _isOverflowStored: function ($element) {
                return typeof $element.data(DATADOCOVERFLOWRULE) === 'string';
            },
            _restoreOverflowRule: function ($element) {
                var overflowRule = $element.data(DATADOCOVERFLOWRULE);
                if (overflowRule !== null && overflowRule !== undefined) {
                    $element.css(OVERFLOW, overflowRule);
                    $element.removeData(DATADOCOVERFLOWRULE);
                    // LSS: maintain scroll position when opening modal popup window
                    var scrollTop = $element.data('scrollTop')
                    $element.scrollTop(scrollTop)
                    $element.removeData('scrollTop');
                } else {
                    $element.css(OVERFLOW, '');
                }
 },

Currently Kendo dialog configuration (https://docs.telerik.com/kendo-ui/api/javascript/ui/dialog) does not provide a built in configuration option to apply class or id to the action buttons. This feature will enable the end user to style the buttons (e.g. add action button background color) in accordance with their preference.

Right now the only position option I see is center. It would be nice to have greater options for positioning the window in the viewport. I know that most people are fine with center but there are times when my business needs to display a lot of data. The center causes the window header to be center but then the user has to scroll or move the window to the top of the screen. Even just an option like TopCenter() would be enough for me. jQueryUI uses a position that takes strings.

Please add option for setting custom window titlebar icons like in this Telerik MVC Window example:

http://demos.telerik.com/aspnet-mvc/razor/window/loadingexternalpage

Please allow for the dynamic creation of kendo windows (straight from javascript) that don't require you to have an existing element to attach the window to (or having to manually create div's in the DOM). Telerik.Window has a name property that sets the ID of the window so one can create windows easier by calling $.telerik.window.create({}) and set the name/id there. Kendo currently doesn't have that functionality. Why can't Kendo.Window do the same - either attach itself to an existing element like it currently does or if a unique name is given and no matching element with the same ID, then create a new div in the DOM and attach to it. Currently one has to manually create the DIV layers to create dynamic windows from.