How to use jqgrid frozen column for different screen widths?

Question

I have a JQgrid grid with a lot of columns. Some people have very wide monitors and some have small laptops.

I want a solution where the folks that have wide monitors can have the grid stretch as long as the size of the window.

For the ones with laptops, I want them to have the frozen columns so when they scroll, they don't lose the first column in the grid.

What is the best way to support this layout?

Answer 1

This thread describes how to set grid width based on browser window size:

javascript - Resize jqGrid when browser is resized? - Stack Overflow

This one suggests using the 'fixed' colModel option to set certain columns to a constant size:

jQGrid set column width - Stack Overflow

And, finally, this site gives some example code and additional tips for using JQGrid:

10 JQGrid Tipls learned from my experience << SANDBOX…….

Answer 2

To have both fluid layout and frozen colums according to the monitor size see this example having a fluid table and a frozen first column:

Step1 - Add jquery.jqGrid.min.js script from the main site.

Step2 - Add jquery.jqGrid.fluid.js script from the site http://code.google.com/p/codeincubator/source/browse/Samples/steveharman/jQuery/jquery.jqgrid.fluid/jquery.jqGrid.fluid.js?r=170

Step3 - html

<div id="grid_wrapper" class="ui-corner-all floatLeft">
<table id="theGrid" class="scroll">
</table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</div>

Step4 - Activate the script

function resize_the_grid()

      {
        $('#theGrid').fluidGrid({base:'#grid_wrapper', offset:-20});
      }

$(document).ready(function(){

        var myGrid = $('#theGrid');        

        myGrid.jqGrid({

          datatype:'clientSide',

          altRows:true,

          colNames:['Name', 'Side', 'Power'],

          colModel:[

            { name:'name', index: 'name', frozen : true },

            { name:'side', index: 'side' },

            { name:'power', index: 'power' } ],

          pager: jQuery('#pager'),

          viewrecords: true,

          imgpath: 'css/start/images',

                caption: 'The Force: Who\'s Who?',

                height: "100%"

        });

        myGrid.addRowData("1", {name:"Luke", side:"Good", power:"6"});

        myGrid.addRowData("2", {name:"Vader", side:"Dark", power:"9"});

        myGrid.addRowData("3", {name:"Han", side:"meh?", power:"0"});        

        resize_the_grid();
});

$(window).resize(resize_the_grid);

Hope this helped.