It is quit easy for developers to make some columns frozen/locked within jqGrid. The locked columns do not scroll out of view when users moving horizontally across the grid. This is quite useful when you dealing with wide table with some fields should be visible permanently.

====== Setup and limitations ======

===== Setup =====

First you will need to setup which columns will be frozen/locked.This is done in colModel setting the property frozen:true. Below is a correct setup:

<code javascript>
...
jQuery("#grid").jqGrid({
...
   colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
   colModel: [
         {name: 'name', index: 'name', width: 70, frozen:true },
         {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
            formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y', frozen:true},
         {name: 'name', index: 'name', width: 70 },
         {name: 'amount', index: 'amount', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'tax', index: 'tax', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'total', index: 'total', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'closed', index: 'closed', width: 75, align: 'center', formatter: 'checkbox',
            edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
         {name: 'ship_via', index: 'ship_via', width: 100, align: 'center', formatter: 'select',
            edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
         {name: 'note', index: 'note', width: 70, sortable: false}
    ],
    rowNum: 10,
    rowList: [5, 10, 20],
 ...
});
</code>

After this you will need to call the method which is responsible to do this:
<code javascript>
jQuery("#grid").jqGrid('setFrozenColumns');
</code>


Note that the frozen property should be set one after other. If there is a missing frozen property in the sequence then the last position which meet this criteria will be used.


The below code will lock only the first column instead that you have set the third field to be frozen:

<code javascript>
..
jQuery("#grid").jqGrid({
...
   colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
   colModel: [
         {name: 'name', index: 'name', width: 70, frozen:true },
         {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
            formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'},
         {name: 'name', index: 'name', width: 70, frozen:true},
         {name: 'amount', index: 'amount', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'tax', index: 'tax', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'total', index: 'total', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'closed', index: 'closed', width: 75, align: 'center', formatter: 'checkbox',
            edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
         {name: 'ship_via', index: 'ship_via', width: 100, align: 'center', formatter: 'select',
            edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
         {name: 'note', index: 'note', width: 70, sortable: false}
    ],
    rowNum: 10,
    rowList: [5, 10, 20],
 ...
});
jQuery("#grid").jqGrid('setFrozenColumns');
</code>


===== Destroy =====

It is possible to destroy the frozenColumns in the grid using the method **destroyFrozenColumns**. This method restores the grid configuration before calling the setupFrozenColums

<code javascript>
jQuery("#grid").jqGrid('destroyFrozenColumns');
</code>

===== Dynamic setup =====

It is possible to change the frozen columns dynamically. In this case it is needed to call first **destroyFrozenColumns** method setup new frozen proerties and call again setFrozenColumns.

Below example tell how to do this, making the invdate column frozen:


<code javascript>
jQuery("#mybutton").click(function(){
   jQuery("#grid")
   .jqGrid('destroyFrozenColumns');
   .jqGrid('setColProp','invdate', {frozen:true});
   .jqGrid('setFrozenColumns');
   .trigger('reloadGrid', [{current:true}]);
});
</code>

<note>Currently in order to refresh the frozen column(s) we need to call trigger('reloadGrid'). Later this will be changed with more easy way.</note>

===== Limitations =====

The following limitations tell you when frozen columns can not be set-up

   * When TreeGrid is enabled
   * When SubGrid is enabled
   * When cellEdit is enabled
   * When inline edit is used - the frozen columns can not be edit.
   * When sortable columns are enabled - grid parameter //sortable// is set to true or is function
   * When scroll is set to true or 1
   * When Data grouping is enabled
   * When footer row  (footerrow paremeter) is enabled