Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
wiki:frozencolumns [2011/12/12 12:46]
tony
wiki:frozencolumns [2017/12/09 14:51] (current)
admin
Line 8: Line 8:
  
 <code javascript>​ <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>​ </​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)