Resize jqGrid when browser is resized

Question

Is there any way to resize a jqGrid when the browser window is resized  I have tried the method described here but that technique does not work in IE7

User · Answer

Hello Stack overflow enthusiasts   I enjoyed most of answers  and I even up-voted a couple  but none of them worked for me on IE 8 for some strange reason    I did however run into these links    This guy wrote a library that seems to work   Include it in your projects in adittion to jquery UI  throw in the name of your table and the div   http   stevenharman net blog archive 2009 08 21 creating-a-fluid-jquery-jqgrid aspx  http   code google com p codeincubator source browse  svn 2FSamples 2Fsteveharman 2FjQuery 2Fjquery jqgrid fluid 253Fstate 253Dclosed

User · Answer

I m using 960 gs for layout so my solution is as follows         window  bind           resize           function                             Grid ids we are using                 demogr   allergygr   problemsgr   diagnosesgr   medicalhisgr   setGridWidth                          grid 5   width                     clinteamgr   procedgr   setGridWidth                          grid 10   width                trigger  resize       Here we set a global options  jQuery extend jQuery jgrid defaults           altRows true      autowidth   true      beforeSelectRow   function rowid  e       disable row highlighting onclick         return false             datatype    jsonstring       datastr   grdata       JSON object generated by another function     gridview   false      height    100        hoverrows   false      loadonce   true      sortable   false      jsonReader             repeatitems   false               Demographics Grid      demogr   jqGrid        caption    Demographics       colNames      Info    Data         colModel               name    Info           width    30            sortable   false          jsonmap    ITEM                   name    Description           width    70            sortable   false          jsonmap    DESCRIPTION               jsonReader             root    DEMOGRAPHICS           id    DEMOID                   Other grids defined below

User · Answer

autowidth  true   worked perfectly for me  learnt from here

User · Answer

This works    var  targetGrid       myGridId      window  resize function          var jqGridWrapperId     gbox      targetGrid attr  id     here be dragons  this is     generated by jqGrid       targetGrid setGridWidth   jqGridWrapperId  parent   width       perhaps add padding calculation here

User · Answer

lt script gt    document  ready function          window  on  resize   function         jQuery   grid   setGridWidth     fill   width    false        jQuery   grid   setGridHeight     fill   height   true       trigger  resize               lt  script gt

User · Answer

Borrowing from the code at your link you could try something like this     window  bind  resize   function             resize the datagrid to fit the page properly         div subject   children  div   each function               this  width  auto              this  find  table   width  100                   This way you re binding directly to the window onresize event  which actually looks like what you want from your question   If your grid is set to 100  width though it should automatically expand when its container expands  unless there are some intricacies to the plugin you re using that I don t know about

User · Answer

Been using this in production for some time now without any complaints  May take some tweaking to look right on your site   for instance  subtracting the width of a sidebar  etc     window  bind  resize   function             jqgrid   setGridWidth   window  width        trigger  resize

User · Answer

The main answer worked for me but made the app extremely unresponsive in IE  so I used a timer as suggested  Code looks something like this     contentColumn  is the div that the JQGrid sits in      function resizeGrids         var reportObjectsGrid       ReportObjectsGrid        reportObjectsGrid setGridWidth     contentColumn   width         var resizeTimer     window  bind  resize   function          clearTimeout resizeTimer       resizeTimer   setTimeout resizeGrids  60

User · Answer

If you    have shrinkToFit  false  mean fixed width columns  have autowidth  true don t care about fluid height have horizontal scrollbar   You can make grid with fluid width with following styles    ui-jqgrid     max-width  100   important    width  auto  important      ui-jqgrid-view   ui-jqgrid-hdiv   ui-jqgrid-bdiv      width  auto  important      Here is a demo

User · Answer

As a follow-up   The previous code shown in this post was eventually abandoned because it was unreliable  I am now using the following API function to resize the grid  as recommended by the jqGrid documentation   jQuery   targetGrid   setGridWidth width     To do the actual resizing  a function implementing the following logic is bound to the window s resize event    Calculate the width of the grid using its parent s clientWidth and  if that is not available  its offsetWidth attribute   Perform a sanity check to make sure width has changed more than x pixels  to work around some application-specific problems  Finally  use setGridWidth   to change the grid s width   Here is example code to handle resizing   jQuery window  bind  resize   function             Get width of parent container     var width   jQuery targetContainer  attr  clientWidth        if  width    null    width  lt  1              For IE  revert to offsetWidth if necessary         width   jQuery targetContainer  attr  offsetWidth              width   width - 2     Fudge factor to prevent horizontal scrollbars     if  width  gt  0  amp  amp             Only resize if new width exceeds a minimal threshold            Fixes IE issue with in-place resizing when mousing-over frame bars         Math abs width - jQuery targetGrid  width     gt  5                jQuery targetGrid  setGridWidth width             trigger  resize      And example markup    lt div id  grid container  gt       lt table id  grid  gt  lt  table gt       lt div id  grid pgr  gt  lt  div gt   lt  div gt

User · Answer

Auto resize   For jQgrid 3 5           if  grid       ui-jqgrid-btable visible                  grid each function index                    gridId     this  attr  id                    gridParentWidth       gbox     gridId  parent   width                            gridId  setGridWidth gridParentWidth                               For jQgrid 3 4 x          if  typeof    table scroll   setGridWidth     function                    table scroll   setGridWidth 100  true     reset when grid is wider than container  div              if  gridObj                   else                       contentBox content  grid bdiv reallyvisible   each function index                        grid     this  children  table scroll                        gridParentWidth     this  parent   width       origami grid gridFromRight                      grid setGridWidth gridParentWidth  true

User · Answer

this seems to be working nicely for me     window  bind  resize   function         jQuery   grid   setGridWidth     parentDiv   width  -30  true      trigger  resize

[javascript] Resize jqGrid when browser is resized?

Examples related to javascript

Examples related to jquery

Examples related to jqgrid

Examples related to grid

Examples related to resize