Info Panel
Info Panel displays number of all of the items loaded to the grid. It is displayed at the bottom of the grid. It is a very useful feature especially when you work with asynchronous data, mainly because it allows you to track number of data loaded from the server.
Info panel is often used with another great feature Virtual scroll.
Name
Position
Team
Training
Company
13
33
42
100
29
92
13
81
72
55
Showing 10 items
import { Component } from '@angular/core';
@Component({
template: `
<gui-grid [columns]="columns"
[infoPanel]="infoPanel"
[source]="users">
</gui-grid>
`
})
export class InfoPanelComponent {
users = users;
columns: Array<GuiColumn> = [{
header: 'Name',
field: 'name'
}, {
header: 'Position',
field: 'position'
}, {
header: 'Team',
field: 'teamShort',
width: 80
}, {
header: 'Training',
field: 'training',
type: GuiDataType.NUMBER,
width: 100
}, {
header: 'Company',
field: 'company'
}];
infoPanel: GuiInfoPanel = {
enabled:true,
infoDialog:true,
columnsManager:true,
sourceSizes:true
};
}[
{
"id": "#1",
"name": "Mark Ross",
"company": "Genco Pura Olive Oil Company",
"position": "Team Leader",
"teamSort": "TI",
"training": 13,
"budget": -7000
}, ...
]Info Panel - Inputs
| Input | Type | Default | Description |
|---|---|---|---|
| infoPanel | boolean | GuiInfoPanel | false | Pass a boolean to enable or disable info panel. Adding GuiInfoPanel object, allows deeper info panel configuration. |
| enabled | boolean | false | Enable/disable info panel. |
| infoDialog | boolean | true | Sets info dialog visibility. |
| columnsManager | boolean | true | Sets column manager visibility. |
| schemaManager | boolean | true | Enables schemaManager. |
| sourceSize | boolean | true | Sets source size visibility. |