Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
wiki:frozencolumns [2011/12/12 12:41]
tony created
wiki:frozencolumns [2017/12/09 14:51] (current)
admin
Line 5: Line 5:
 ===== Setup ===== ===== Setup =====
  
-First you will need to setup which columns will be frozen/​locked.This is done in colModel setting the property frozen:true+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 

QR Code
QR Code wiki:frozencolumns (generated for current page)