Adding a Column Tool Panel

In DataViewsJS, you can create a tool panel to control the visibility of columns. The tool panel displays a list of columns with check boxes. The check boxes can be checked to display the selected columns in the grid at run time.

Use the following steps to display the tool panel in the grid.

Sample Code

1. Define a panel container using the DIV tag. This allows the user to provide an option to hide the tool panel using a button.

<div class="command-container">
  <div class="btn-group" data-toggle="buttons" role="group">
    <button class="btn btn-default" onclick="onShowToolPanelClick(true);">
      Show ToolPanel
    </button>
    <button class="btn btn-default" onclick="onShowToolPanelClick(false);">
      Hide ToolPanel
    </button>
  </div>
</div>

2. Add the column definition. Add the initialization code using the grid ID from the DIV tag. Set showToolPanel to True when initializing the grid. This property is included in the default Grid Layout.

3. Add a function to invoke the event to display the tool panel along with the button events.

function onShowToolPanelClick(visible) {
  if (visible) {
    $('#show-btn').addClass('active');
    $('#hide-btn').removeClass('active');
  } else {
    $('#show-btn').removeClass('active');
    $('#hide-btn').addClass('active');
  }
  dataView.options.showToolPanel = visible;
}

See also

• showToolPanel
• colMinWidth