How to dynamically resize jqgrid to current window size?

Question

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);

Balboa

Answer 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.

Exhibitioner

I would like to see the grid at the width and height of the window (not just width) – Balboa

Then use setGridHeight alongside setGridWidth. – Exhibitioner

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 – Balboa

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

Answer 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)

Debroahdebs