How to dynamically resize jqgrid to current window size?

javascript jquery jqgrid resize window

12,307

Solution 1

function resizeJqGridWidth(grid_id, div_id, width)
{
    $(window).bind('resize', function() {
        $('#' + grid_id).setGridWidth(width, true); //Back to original width
        $('#' + grid_id).setGridWidth($('#' + div_id).width(), true); //Resized to new width as per window
     }).trigger('resize');
}

setGridWidth(new_width, shrink): Sets a new width to the grid dynamically.

new_width: It will be the new width (pixel).

shrink (default true) :

true -> It will allow to resize columns with in the grid according to the currently resized jqGrid width.

false -> It will append additional blank column at the end of jqGrid, if currently resized width of jqGrid will exceed its setup jqGrid width.

Courtesty of mfs.

Solution 2

Based on display:flex; solution is available here:
Plnkr
Tested on:

IE 11, Chrome, Opera - ok.
FF - shows vertical scrollbar in wrong place.
Safary - ok.

Hope it helps.

Edit:
I was trying to solve same problem: have some container which shrinks and stretches depending on browser window size.
CSS only solution pin points:

Create flex layout as described here
make target jqGrid container element to also be flex container and place jqGrid there and css below will do all the magic.

CSS for jqGrid

    .ui-jqgrid {
      display: flex;
      flex-direction: column;
      flex:1;
      width:auto !important;
    }
    .ui-jqgrid > .ui-jqgrid-view
    {
      display:flex;
      flex:1;
      flex-direction:column;
      overflow:auto;
      width:auto !important;
    }

     .ui-jqgrid > .ui-jqgrid-view,
     .ui-jqgrid > .ui-jqgrid-view > .ui-jqgrid-bdiv {
          flex:1;
          width: auto !important;
    }

    .ui-jqgrid > .ui-jqgrid-pager,
    .ui-jqgrid > .ui-jqgrid-view > .ui-jqgrid-hdiv {
        flex: 0 0 auto;
      width: auto !important;
    }
    /* enable scrollbar */
    .ui-jqgrid-bdiv {
        overflow: auto
    }

CSS to organize flex layout:

    .box {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
     .boxHeader {
        -ms-flex: 0 0 auto;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        background-color: green;
    }
     .boxContent {
        -ms-flex: 1 1 auto;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        -webkit-box-flex: 1.0;
        overflow: auto;
    }
     .boxFooter {
        -ms-flex: 0 1 auto;
        -webkit-flex: 0 1 auto;
        flex: 0 1 auto;
        background-color: cornflowerblue;
    }
    .fullSize {
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
    }

and finally sample markup:

    <body>
        <!--Flex stuff -->
        <div class="box fullSize">
          <div class="boxHeader" style="background-color:#5fbff3">
            header just to show that this block takes<br> as much as it         needs<br> to display its<br> content
          </div>
          <div class="boxContent box" style="background-color:#D0D0D0;         padding:15px">
             <table id="list"></table>
              <div id="pager"></div>
          </div>
          <div class="boxFooter" style="text-align:right"><span>same as header</span></div>
        </div>

<!-- Flex stuff end -->
    </body>

in .js do

    var grid = $("#list");
    grid.jqGrid({ options});

don't need to set width or height. (anyway they will be ignored)

12,307

Author by

tuuni

Updated on June 04, 2022

Comments

tuuni almost 2 years
How to dynamically resize jqgrid to current window size (based on javascript / jQuery)

Best example is here (TinyMCE): Goto: http://www.tinymce.com/tryit/full.php

Then try CTRL+ALT+F or Menu->View->Full Screen

Please help, i have beginner knowledge in js/jquery (i know more PHP language).

Thats how i call jqgrid:

$grid->renderGrid('#grid','#pager',true, null, null, true,true);

..thanking in advance

This is what i ment if you understand me.

I would like to add custom button to the gridNav to function like switch between enlarged and normal view (like a tinyMCE editor has!!)

My grid table has many columns (long horizontal scroll) thats why i came to the idea to enrage the whole table.

The button code...
```
$buttonoptions = array("#pager", array(
        "caption"=>"Resize", 
        "onClickButton"=>"js:function(){ ... resize call here ...}", "title"=> "Resize"
   )
);
$grid->callGridMethod("#grid", "navButtonAdd", $buttonoptions);
```
tuuni almost 11 years

I would like to see the grid at the width and height of the window (not just width)
eclipsis almost 11 years

Then use setGridHeight alongside setGridWidth.
tuuni almost 11 years

i think more like a way to make a button switch to resize the grid back and forth. trirand.com/jqgridwiki/doku.php?id=wiki:custom_buttons
catbadger over 6 years

This will fire multiple times per resize. There HAS to be a more efficient way.