Differences
This shows you the differences between two versions of the page.
| 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 | ||
