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
info-panel.component.ts
users.ts
Name
Position
Team
Training
Company
Mark Ross
Team Leader
TI
13
Genco Pura Olive Oil Company
Concepción King
Carpenter
KN
33
Globex Corporation
Vanecia Green
Painter
CR
42
Soylent Corp
Samara Anderson
Electrician
PU
100
Initech
Maxine Hamilton
SEO Manager
KN
29
Gekko & Co
Dan Lee
Director
TI
92
Sterling Cooper
Paul Long
Web Developer
AN
13
Hooli
Madonna Snyder
Product Manager
DR
81
Vehement Capital Partners
Oriole Perkins
Public Relations
TI
72
Massive Dynamic
Ernest Jordan
Copywriter
TI
55
Wonka Industries
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
    }, ...
]

Inputs

InputTypeDefaultDescription
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.
columnsManagerbooleantrue Sets column manager visibility.
schemaManagerbooleantrue Enables schemaManager.
sourceSizebooleantrue Sets source size visibility.

Related articles: