Vue Data GridTool Panel ComponentEnterprise
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.
Below is a simple example of an a tool panel component:
const MyToolPanelComponent = {
template: `
<div style="text-align: center">
<span>
<h2><i class="fa fa-calculator"></i> Custom Stats</h2>
<dl style="font-size: large; padding: 30px 40px 10px 30px">
<dt style="padding-bottom: 15px">Total Medals: <b>{{ numGold + numSilver + numBronze }}</b></dt>
<dt style="padding-bottom: 15px">Total Gold: <b>{{ numGold }}</b></dt>
<dt style="padding-bottom: 15px">Total Silver: <b>{{ numSilver }}</b></dt>
<dt style="padding-bottom: 15px">Total Bronze: <b>{{ numBronze }}</b></dt>
</dl>
</span> </div>`,
data() {
return {
numGold: 0,
numSilver: 0,
numBronze: 0
};
},
methods: {
renderStats() {
this.params.api.forEachNode((rowNode) => {
const data = rowNode.data;
if (data.gold) this.numGold += data.gold;
if (data.silver) this.numSilver += data.silver;
if (data.bronze) this.numBronze += data.bronze;
});
}
},
created() {
this.params.api.addEventListener('modelUpdated', this.renderStats.bind(this));
}
}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:
Any valid Vue component can be a tool panel component.
When a custom tool panel component is instantiated then the following will be made available on this.params:
Properties available on the IToolPanelParams<TData = any, TContext = any> interface.
| The grid api. | |
| The column api. | |
| Application context as set on gridOptions.context. |
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:
this.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.