Angular Data Grid

Tool Panel Component

angular logo

Custom Tool Panel Components can be included into the grid's Side Bar. Implement these when you require more Tool Panels to meet your application requirements.

The example below provides a 'Custom Stats' Tool Panel to demonstrates how to create and register a Custom Tool Panel Component with the grid and include it the Side Bar:

Implementing a Tool Panel Component

Implement this interface to create a tool panel component.

interface IToolPanelAngularComp {
   // mandatory methods

   // The agInit(params) method is called on the tool panel component once.
   // See below for details on the parameters.
   agInit(params: IToolPanelParams): void;

   // optional methods

   // Called when `api.refreshToolPanel()` is called (with the current params).
   // Also called when the `sideBar` grid option is updated (with the updated params).
   // When `sideBar` is updated, if this method returns `true`,
   // then the grid will take no further action.
   // Otherwise, the tool panel will be destroyed and recreated.
   refresh(params: IToolPanelParams): boolean | void;

   // If saving and restoring state, this should return the current state
   getState(): any;

The agInit(params) method takes a params object with the items listed below: