Row Select

Row selection is a configurable feature. Developer can specify whether he wants to turn it on or off.

Example
row-select.component.html
row-select.component.ts
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
<gui-grid [columns]="columns"
		  [rowSelecting]="rowSelecting"
		  [source]="source">
</gui-grid>
import { Component } from '@angular/core';

import { GuiCellView } from '@generic-ui/ngx-grid';

@Component({
	templateUrl: './row-select-grid.component.html',
})
export class RowSelectGridComponent {

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

	source = source;

	rowSelecting = false;

}


Grid Row Height - Inputs

InputTypeDefault valueDescription
rowSelectingbooleantrue Enables / disables row selection.

Related articles:

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