nelsonm on Discussion about modifications i made to the "columnChooser" method.

Thu, 07 Feb 2013 04:05:11 +0200

First of all, I'm greatfull that a way to dynamically sort and hide/show columns via the "columnChooser" method exists.

However, it seems a bit awkward and incomplete in it's functionality in the "apply_perm" option function within the "columnChooser" method.

1. if you don't use the "done" option, the method remaps the columns using the default jqgrid remapColumns method attached to the "done" option in the "columnChooser" method extended options. If you do use the "done", you have to execute the jqgrid remapColumns method manually in a user defined "done" callback function. However, hiding and showing columns is always managed within the "apply_perm" option function regardless of whether a user defined "done" callback function is defined. It seems to me that the remapping and visibility of the columns should always be handled within the "apply_perm" option function regardless of whether a user defined "done" callback function is defined.

2. the "columnChooser" method always makes the permutation array available as a parameter of the user defined "done" callback function. This is most usefull for storing and retrieving the column order via SQL. However, there is no array available that contains the visibility of the columns to use in storing and retrieving the column visibility via SQL.

When i reload my site, i find it usefull to be able to retrieve and restore both the permutation and visibility of all jqGRID columns.

So, i made a few modifications to the columnChooser's "apply_perm" option function to make make its functionallity more consistant and usefull.

Here are the modifications i made (in black). Your comments are welcome. (It would also be nice if columns in the hidden select list on columnChooser could be added back to the visible select list in the same location it was removed from in the visible select list. TBD)

"apply_perm" : function() {

$('option',select).each(function() {

if (this.selected) {

self.jqGrid("showCol", colModel[this.value].name);

} else {

self.jqGrid("hideCol", colModel[this.value].name);

}

});

var visi = [];

$.each(colModel, function(i){visi.push(!this.hidden);});

var perm = [];

//fixedCols.slice(0);

$('option:selected',select).each(function() { perm.push(parseInt(this.value,10)); });

$.each(perm, function() { delete colMap[colModel[parseInt(this,10)].name]; });

$.each(colMap, function() {

var ti = parseInt(this,10);

perm = insert(perm,ti,ti);

});

self.jqGrid("remapColumns", perm, true);

if (opts.done) {

opts.done.call(self, perm, visi);

}

Now the user defined callback function has access to both the permutation and visibility arrays available to store and restore via SQL as follows:

function setGridState(gid,pid,caption,title){

// setup print button in the grid top navigation bar.

$('#'+gid).jqGrid('navSeparatorAdd', '#'+gid+'_toppager_left', {sepclass :'ui-separator'});

$('#'+gid).jqGrid('navButtonAdd', '#'+gid+'_toppager_left', {caption: caption, title: title, position: 'last', buttonicon: 'ui-icon-wrench', onClickButton : function (){$('#'+gid).jqGrid('columnChooser',{done: done});/* HideColumns('#colchooser_',gid); */}});

// OK or Cancel button are clicked.

var done = function(perm,visi){

// OK was clicked.

if (perm){

// maintain proper grid width.

$('#'+gid).jqGrid('setGridWidth',SavedGridWidth[gid]);

// save new column order and visability in database.

SaveGridState(gid,perm,visi);

}else{

// we can do some action in case of "Cancel" button clicked

}

What do you all think?

jQuery Grid Plugin - jqGrid - Topic: Discussion about modifications i made to the "columnChooser" method.

nelsonm on Discussion about modifications i made to the "columnChooser" method.