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.
$('#jquery-info-panel-grid').guiGrid({
infoPanel: GuiInfoPanel = {
enabled:true,
infoDialog:true,
columnsManager:true,
sourceSizes:true
},
columns: [{
header: 'Name',
field: 'name'
}, {
header: 'Position',
field: 'position'
}, {
header: 'Team',
field: 'teamShort',
width: 80
}, {
header: 'Training',
field: 'training',
type: 'number',
width: 100
}, {
header: 'Company',
field: 'company'
}],
source: [...users]
});<div id="jquery-info-panel-grid"></div>[
{
"id": "#1",
"name": "Mark Ross",
"company": "Genco Pura Olive Oil Company",
"position": "Team Leader",
"teamSort": "TI",
"training": 13,
"budget": -7000
}, ...
]Info Panel - options
| Options | 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. |
| schemaManager | boolean | true | Enables schemaManager. |
| columnsManager | boolean | true | Sets column manager visibility. |
| sourceSize | boolean | true | Sets source size visibility. |