The tool panel is where you can change the state of the columns. This includes show / hide, move and group.
The tool panel panel can be shown be default by setting 'showToolPanel=true' property, or after the grid is initialised by calling the api function showToolPanel(show). You can query if the tool panel is showing with the api isToolPanelShowing().
If you don't want to show the values list in the tool panel, set toolPanelSuppressValues=true property. This is useful if you don't want aggregation, or you have provided your own aggregation function (which would then not use the values selected here).
If you don't want to show the group row, set toolPanelSuppressRowGroups=true property. This is used if you just want simple column visibility and reordering functionality in the tool panel. Note that hiding the group has the impact of also hiding the values, as it doesn't make sense to have values if you are not grouping.
All columns are visible by default. To hide a column when first displaying the grid, mark the column definition with hide = true.
To hide a column using the tool panel, click the icon beside the columns name.
To group by a column, drag the column down to the group GUI. The order of the column in the group list can be changed by dragging, with the first value been the top most group.
To mark a column as a value (for aggregation), drag the column down to the value GUI. From here you can select the aggregation function (sum, min or max). This aggregation function will only work when you are using the default aggregation (ie you are not providing your own aggregation function).
enablePivotfor pivoting and
enableValuefor aggregation. Otherwise you won't be able to drag and drop the columns to the desired sections from the Tool Panel.
You can add a CSS class to the columns in the tool panel by specifying toolPanelHeaderClass
in the column definintion as follows:
The example below demonstrates the tool panel. Note the following:
enablePivot: true. This means you can drag the columns to the group and pivot sections, but you cannot drag them to the values sections.
enableValue=true. This means you can drag the columns to the values section, but you cannot drag them to the group or pivot sections.
Below shows using the suppress properties that can be used with the toolpanel as follows:
By setting the property functionsReadOnly=true, the grid will prevent changes to group, pivot or values through the GUI. This is useful if you want to show the user the group, pivot and values panel, so they can see what columns are used, but prevent them from making changes to the selection.