You can use GridColumn.visible property to hide or display the column.
$('#toggle').click = function () {
var col = grid.columnByName('country');
col.setVisible(!col.visible());
};
GridColumn.displayIndex has the display location of column, and if hidden, it will have the value less than 0. And, you can set displayIndex to change the display location, specify -1 to hide it, or specify the value greater than 0 to display the hidden column again.
GridColumn.index is the location of column specified when it is added to the grid, and it will be maintained regardless of display state.
Columns: , index: 0,
Column Groups: , index: 0,