As we are in the mood to create some user-grid interactions, let us add some more buttons that do fun stuff.
We will now add a button to the top toolbar to allow us to hide or show a column. We will also change the text of the button based on the visibility of the column—a fairly typical interaction:
{
text: 'Hide Price',
handler: function(btn){
var cm = grid.getColumnModel(),
pi = cm.getIndexById('price');
// is this column visible?
if (cm.isHidden(pi)){
cm.setHidden(pi,false);
btn.setText('Hide Price');
}else{
cm.setHidden(pi,true);
btn.setText('Show Price');
}
}
}
We have used a new method here—getIndexById, which, as you can imagine, gets the column index, which will be a number from zero to one less than the total number of columns. This number is an indicator of where that column is in relation to the other columns. In our grid code, the column price is the fourth column, which means that the index is three because indexes start at zero.