Next
Update
Prev
Year
Quarter

To show and hide a column, set the visible property to true, false, and the default value of the visible property is true. You can also show and hide a column using the JavaScript API, setVisible() provided by KoolGrid. This sample Grid demonstrates using setVisible() to show and hide Year and Quarter. Try to click the checkboxes that are showing below the sample Grid.

var gridApp, gridRoot, dataGrid, columns;

function gridReadyHandler(id) {
  gridApp = document.getElementById(id);
  gridRoot = gridApp.getRoot();
  
  gridApp.setLayout(layoutStr);
  gridApp.setData(gridData);
  
  var layoutCompleteHandler = function(event) {
    dataGrid = gridRoot.getDataGrid();
    columns = dataGrid.getColumns();
  }
  gridRoot.addEventListener("layoutComplete", layoutCompleteHandler);
}

function setColumnVisible(columnNo, check) {
  columns = dataGrid.getColumns();
  columns[columnNo].setVisible(check.checked);
}
setVisible() This JavaScript API is to set the visibility of the column.

<DataGridColumn>

visible Whether or not to show the column. The default value of the visible property is true.

© 2017 KoolChart. All rights reserved.