So I have been working with the grid's a lot and was wondering if my resize solution can be improved.
The aim of my code are the following:
1) Load the editor pop up template to cover 80% width and 80% height of the viewable screen area
2) Always keep the cancel, update button viewable on the screen
3) If the editing content area is taller than the actual viewport window this should scroll in the Y axis only
4) On the auto resize re-center the popup editor.
I guess what I am trying to do is make this as "responsive" as possible.
This is called from the grid's edit event.
So after a lot of trial and error I have finally come up with this javascript function
This has been tested using IE 11, Chrome (plus a lot of the emulation modes for tablets) , IPad Air (physical unit) and it seems to function fine and resize correctly.
I just need to adapt/ create a version of this for when the pop up editor is resizeable so that it adjusts the form nicely. But thought this would be a nice bit of code for others to use/ adapt as they need.
The aim of my code are the following:
1) Load the editor pop up template to cover 80% width and 80% height of the viewable screen area
2) Always keep the cancel, update button viewable on the screen
3) If the editing content area is taller than the actual viewport window this should scroll in the Y axis only
4) On the auto resize re-center the popup editor.
I guess what I am trying to do is make this as "responsive" as possible.
This is called from the grid's edit event.
So after a lot of trial and error I have finally come up with this javascript function
01.
function
ResizeWindow()
02.
{
03.
//Get the Kendo PopUp Window
04.
var
popUpWindow = $(
".k-popup-edit-form"
).data(
"kendoWindow"
);
05.
//Get the inner content area of the editoring window
06.
var
contentArea = $(
".k-edit-form-container"
);
07.
//Get the actual form that is used for editing (using the bootstrap .form-horizontal to indicate forms)
08.
var
innerForm = $(
".form-horizontal"
);
09.
//Get 80% of current browser window height/width and set the editing window to these
10.
contentArea.height($(window).innerHeight() * 0.8).width($(window).innerWidth() * 0.8);
11.
// re-center the editing window otherwise it will position towards top-right and partially of screen
12.
popUpWindow.center();
13.
14.
//Get the viewable content area height and minus 70px so that the buttons are viewable
15.
var
fixedHeight = (contentArea.height() - 70);
16.
//set the viewable content width to 99% of the editing screen. (otherwise get a X-Scrollbar)
17.
var
fixedWidth = contentArea.width() * 0.99;
18.
19.
//configure the editing form and set max height, max width and overflow options.
20.
//using !important as otherwise this gets overridden
21.
innerForm.height(fixedHeight).width(fixedWidth).css({
22.
maxHeight: fixedHeight +
'px !important'
,
23.
maxWidth:fixedWidth +
'px !important'
,
24.
overflowY:
'scroll'
,
25.
overflowX:
'hidden'
26.
27.
});
28.
}
This has been tested using IE 11, Chrome (plus a lot of the emulation modes for tablets) , IPad Air (physical unit) and it seems to function fine and resize correctly.
I just need to adapt/ create a version of this for when the pop up editor is resizeable so that it adjusts the form nicely. But thought this would be a nice bit of code for others to use/ adapt as they need.