How to use frozen jqgrid column for different screen width?

Question

How to use frozen jqgrid column for different screen width?

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

I want a solution in which people with wide monitors can stretch the grid until the window is sized.

For those who have laptops, I want them to have 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?

+5

jquery jquery-ui jqgrid

leora Dec 19 '11 at 14:40

source share

2 answers

, , . :

1 - jquery.jqGrid.min.js script .

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

3 - 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>

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