JavaScript Data GridTool Panel Component

ReactAngularVueJavascript

Enterprise

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:

Tool Panel Interface

Implement this interface to create a tool panel component.

interface IToolPanelComp {
    // The init(params) method is called on the tool panel once upon component initialisation.
    init(params: IToolPanelParams): void;

    // Returns the DOM element for this Tool Panel
    getGui(): HTMLElement;

    // Can be left blank if no custom refresh logic is required.
    refresh(): void;
}

The interface for the init parameters is as follows:

Registering Tool Panel Components

Registering a Tool Panel component follows the same approach as any other custom components in the grid. For more details see: Registering Custom Components.

Once the Tool Panel Component is registered with the grid it needs to be included into the Side Bar. The following snippet illustrates this:

const gridOptions: {
    sideBar: {
        toolPanels: [
            {
                id: 'customStats',
                labelDefault: 'Custom Stats',
                labelKey: 'customStats',
                iconKey: 'custom-stats',
                toolPanel: CustomStatsToolPanel,
            }
        ]
    }

    // other grid properties
}

For more details on the configuration properties above, refer to the Side Bar Configuration section.