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.

Info Panel example
info-panel-grid.js
info-panel.html
users.js
$('#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>
[
    {
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

Info Panel - options

OptionsTypeDefaultDescription
infoPanelboolean | GuiInfoPanelfalse Pass a boolean to enable or disable info panel. Adding GuiInfoPanel object, allows deeper info panel configuration.
enabledbooleanfalse Enable/disable info panel.
infoDialogbooleantrue Sets info dialog visibility.
schemaManagerbooleantrue Enables schemaManager.
columnsManagerbooleantrue Sets column manager visibility.
sourceSizebooleantrue Sets source size visibility.

Related articles:






We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.