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.

Info Panel

Info Panel - options

Related articles: