Progress® Telerik® UI for ASP.NET AJAX Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 26 Jun 2018 11:09 by ADMIN
Informat
Created on: 18 Nov 2014 10:58
Category: Window
Type: Feature Request
14
Adaptive RadWindow
Admin update: You can follow this article and the sample it provides to create an adaptive RadWindow https://docs.telerik.com/devtools/aspnet-ajax/controls/window/mobile-support/responsive,-adaptive-and-elastic-capabilities#fluid-or-adaptive-design-with-radwindow and you can also tweak the provided code through the rich client-side API of the control so it matches your concrete requirements.



RadWindow is one of the controls we use a lot in our applications. As our applications get more and more optimized to be used on smartphones and tablets, we tried to redo some of our functionality or replace them with RadLightboxes or other ways. But the RadLightbox lacks a lot of the functionality the RadWindow has: windowmanager, dialogs, more focussed on regular web-page content,.... 

I have been waiting for adaptive RadWindow functionality for quite some time, and I really hope I'm not the only one! Today I've read your Q1 2015 road map and I decided to finally post this feature request here too (I contacted your support team about this a few weeks ago).

It's easy to dynamically create windows using the windowmanager, pass data between them, show dialogs, etc... 
It would be very nice to be able to still have all this functionality, but with added adaptive behavior.

If the viewport width is too small to display the window or dialog in a correct way, the window/dialog would need to open maximized immediately without restricting height/width.

It would be nice to keep the title-bar and the close functionality on top, but I really don't need to move, minimize, maximize, pin,... the window on a smartphone, only be able to view its contents, interact with the content and close the window if needed. A bit like your lightbox does, but less focused on images/galleries and more flexible using the managers and the existing API these windows already have.

This would of course need to work for windows with url's (iframe), contenttemplates, and dialogs too. 

I like the Bootstrap modal-window, for example. If your windows/dialogs could behave a bit more like that on mobile devices, but would keep the functionality of the window-manager, adding iframe-content, dialogs, I would be more than happy!

Thanks
Nick
5 comments
ADMIN
Marin Bratanov
Posted on: 26 Jun 2018 11:08 
You can follow this article and the sample it links to create an adaptive RadWindow to your liking: https://docs.telerik.com/devtools/aspnet-ajax/controls/window/mobile-support/responsive,-adaptive-and-elastic-capabilities#fluid-or-adaptive-design-with-radwindow
Henrik
Posted on: 30 Apr 2015 07:13 
I will definetely back this suggestion.

I imaging that you could add an option to generate the following behaviour on mobile devices:

When a RadWindow is opened it automaticly maximises.  It removes the borders and disables the option to move and pin the window.
The top-bar would be changed to reflect a mobile device with a big touch-friendly close button.

Actually it would look a lot like you just navigated to another page but with the top-bar so you can close an return to the original page.
ADMIN
Marin Bratanov
Posted on: 18 Nov 2014 15:19 
The problem with that is a generic one and there should be no difference between the current modes and any future mobile mode. The page should not be scrollable (apart from the RadWIndow content) but the problem with this is that mobile browserse make everything scrollable, so it is extremely difficult to stop this. You can read more about this in the following forum thread http://www.telerik.com/forums/radwindow-on-touch-devices and here is the page where you can track this issue's progress: http://feedback.telerik.com/Project/108/Feedback/Details/128968-fix-maximized-radwindow-does-not-prevent-page-scrolling-under-ios-and-android
Informat
Posted on: 18 Nov 2014 15:09 
Hi Marin,

I tried your solution, and had previously tried a similar solution myself. But in this situation the window is not entirely 'locked' in place, although it's defined modal and non-movable too. When the user swipes to scroll down (Android smartphone), the underlying page scrolls and the 'maximized' window scrolls away. 

Only the contents of the window have to be scrollable, the Window itself needs to stay fixed in place.

I suggested this feature request in first place to have the correct behavior on smartphone/mobile devices out of the box, and I thought this would be useful for other users too. But maybe most of my requirements are indeed possible with a few more workarounds or additions to your proposed solution. 

Thanks,
Nick
ADMIN
Marin Bratanov
Posted on: 18 Nov 2014 12:10 
Hi Nick,

You can have the RadWindows maximize if the viewport is not enough with a few lines of code in the OnClientShow event, for example:

function OnClientShowHandler(sender, args) {
	var viewPortBounds = $telerik.getClientBounds();
	var wndBounds = sender.getWindowBounds();
	if (wndBounds.width > viewPortBounds.width ||
		wndBounds.height > viewPortBounds.height) {
		sender.maximize();
	}
}

And you can also attach similar logic to other events (e.g., AutoSizeEnd or ResizeEnd) or execute it after your own code modifies a RadWindow.
Create an account Log In
View
Type
Status
Category