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?

Why you start bounty? You don't accept any answer and don't award the bounty any time in the last 10 your questions where you start bounty. Somebody get 50% of the bounty automatically because of *other people* vote the answers up (see about automatic awarding [here](http://meta.stackexchange.com/a/16067/147495)). Were all the answers so bad? Is it fair to start bounty if you seems don't plan to award it? — Oleg, Dec 31 '11 at 12:17
@Oleg - I didn't realize that the top answer doesn't get the full bounty. I will make sure to award before it expires going forward — leora, Dec 31 '11 at 13:35
One of these links may help: http://stackoverflow.com/questions/6756276/jqgrid-set-column-width and/or http://veechand.wordpress.com/2009/07/13/10-jqgrid-tips-learned-from-my-experience/ — leanne, Dec 31 '11 at 19:46

score 4 · Accepted Answer · edited May 23 '17 at 11:58

4

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

edited May 23 '17 at 11:58

Community

1
1

answered Dec 31 '11 at 20:01

leanne

7,940
48
77

this doesn't explain about how frozen columns come into play – leora Jan 07 '12 at 14:15

score 1 · Answer 2 · edited Jan 05 '12 at 23:00

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.

How to use jqgrid frozen column for different screen widths?

2 Answers2