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
info-panel.component.html
Number
Name
Position
Team
8Kobe BryantSGLos Angeles Lakers1Tracy McGradySGHouston Rockets23Lebron JamesPFLos Angeles Lakers3Dwayne WadeSGMiami Heat15Vince CarterSGAtlanta Hawks34Charles BarkleyPFN/A15Nikola JokićPFDenver Nuggets0Russell WestbrookPGHouston Rockets7Kevin DurantPFBrooklyn Nets13James HardenPG/SGHouston Rockets13Paul GeorgeSGLos Angeles Clippers25Ben SimmonsPGPhiladelphia 76ers2Kawhi LeonardSG/SFLos Angeles Clippers21Joel EmbiidCPhiladelphia 76ers34Giannis AntetokounmpoPFMilwaukee Bucks30Stephen CurryPGGolden State Warriors11Klay ThompsonSGGolden State Warriors23Anthony DavisPFLos Angeles Lakers
Showing 18 items
@Component({
	selector: 'docs-info-panel-grid',
	templateUrl: './docs.info-panel-grid.component.html'
})
export class DocsInfoPanelGridComponent {

	infoPanel = true;

	columns = [{
		header: 'Number',
		field: 'number',
		width: 60
	}, {
		header: 'Name',
		field: 'name',
		view: GuiCellView.ITALIC
	}, {
		header: 'Position',
		field: 'position',
		view: GuiCellView.BOLD
	}, {
		header: 'Team',
		field: 'team'
	}];

	source = source;

	toggleInfoPanel(): void {
		this.infoPanel = !this.infoPanel;
	}
}
<gui-button-toggle
	[checked]="infoPanel"
	(click)="toggleInfoPanel()">
	Info Panel
</gui-button-toggle>

<gui-grid [infoPanel]="infoPanel"
	[maxHeight]="300"
	[columns]="columns"
	[source]="source">
</gui-grid>

Related articles:






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