Is there a better way of auto resizing the grid pop up editor?

[Jelly Master]

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 

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. 

[Dimo]

Hi David,

With regard to popup edit form resizing, you can use:

div.k-edit-form-container
{
    width: auto;
    min-width: 400px;
    max-width: 1800px;
}

.k-popup-edit-form .k-edit-field > .k-textbox,
.k-popup-edit-form .k-edit-field > .k-widget
{
    width: 90%;
}

$("#grid").kendoGrid({
    editable: {
        mode: "popup",
        window: {
            resizable: true
        }
    }
});

http://docs.telerik.com/kendo-ui/api/web/grid#configuration-editable.window


Regards,
Dimo
Telerik

 

 

[Jelly Master]

Thanks for the info.

I will see if this is something that I can adapt for my needs. I am actually using the MVC Wrappers for the code that I provided.

Obviously my aim was to make this as responsive as possible so try to avoid having to put in either @media css rules or hardcode predefined sizes within my css. Which is why I went down the JQuery route (plus gives me a bit of chance to learn JQuery)

I am guessing I should be able to hook into the window resize event for the pop up window and alter the css rules via that. (I'll have a play and post my results for others)