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
Showing 10 items
@Component({
	template: `
		<gui-grid [columns]="columns"
				  [infoPanel]="infoPanel"
				  [source]="users">
		</gui-grid>
	`
})
export class InfoPanelComponent {

	users = users;

	columns = [{
        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
	 };
	
	
}
[
    {
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

Info Panel - 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:






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