JavaScript Data GridStatus Bar Panels (Components)Enterprise
Status Bar Panels allow you to add your own components to the grid's Status Bar. Use this when the provided status bar components do not meet your requirements.
Below is a simple example of a status bar component:
class ClickableStatusBarComponent {
init(params) {
this.params = params;
this.eGui = document.createElement('button');
this.buttonListener = this.onButtonClicked.bind(this);
this.eGui.addEventListener("click", this.buttonListener);
this.eGui.innerHTML = 'Click Me For Selected Row Count';
this.eGui.style.padding = "5px";
this.eGui.style.margin = "5px";
}
getGui() {
return this.eGui;
}
destroy() {
this.eButton.removeEventListener("click", this.buttonListener);
}
onButtonClicked() {
alert('Selected Row Count: ' + this.params.api.getSelectedRows().length)
}
}
Implement this interface to create a status bar component.
interface IStatusPanelComp {
// The init(params) method is called on the status bar component once.
// See below for details on the parameters.
init?(params: IStatusPanelParams): void;
// Return the DOM element of your component, this is what the grid puts into the DOM.
getGui(): HTMLElement;
// Gets called when the grid is destroyed - if your status bar components needs to do any cleanup, do it here.
destroy?(): void;
}
The method init(params) takes a params object with the interface IStatusPanelParams
.
Properties available on the IStatusPanelParams<TData = any, TContext = any>
interface.
| The grid api. | |
| The column api. | |
| Application context as set on gridOptions.context . |
In order to add new components to the Status Bar (or to configure the provided agAggregationComponent
component) you need to provide the components and any associated information to statusBar
:
const gridOptions = {
statusBar: {
statusPanels: [
{
statusPanel: MyStatusBarComponent
},
{
statusPanel: 'agAggregationComponent',
statusPanelParams : {
// only show count and sum ('min', 'max', 'avg' won't be shown)
aggFuncs: ['count', 'sum']
}
}
]
},
// ...other properties
}
In the configuration above we've specified a custom component (MyStatusBarComponent
) as well as the provided agAggregationComponent
component.
Order is important here - the order of the components provided will determine the order in which they're rendered, from left to right.
The status bar components will be instantiated before the grid is fully initialised - specifically they will be initialised before any row data has been rendered.
If you have a component that you wish to work on data once it's ready (calculate the sum of a column for example) then you'll
need to hook into the modelUpdated
event. Remember to remove the event listener when the component is destroyed.
class ClickableStatusBarComponent() {
init(params) {
this.params = params;
// Remember to remove the event listener when the component is destroyed
params.api.addEventListener('modelUpdated', () => {
// On the modelUpdated event rows will be available
this.updateStatusBar();
});
}
updateStatusBar(){ ... }
}
After the grid has created an instance of a status bar component it is possible to access that instance. This is useful if you want to call a method that you provide on the status bar component that has nothing to do with the operation of the grid. Accessing a status bar component is done using the grid API getStatusPanel(key)
.
| Gets the status panel instance corresponding to the supplied id .
|
The example below shows using getStatusPanel
: