Row Select

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

The row selection feature is configured by the input rowSelection: GuidRowSelection.

export interface GuiRowSelection {

	enabled?: boolean;

	type?: string | GuiRowSelectionType;

	mode?: string | GuiRowSelectionMode;

}

Here you can see a basic example of grid in which row selection can be enabled or disabled.

Example
row-select.component.ts
row-select.component.html
users.ts
Number
Name
Position
Team
8
Kobe Bryant
SG
Los Angeles Lakers
1
Tracy McGrady
SG
Houston Rockets
23
Lebron James
PF
Los Angeles Lakers
3
Dwayne Wade
SG
Miami Heat
15
Vince Carter
SG
Atlanta Hawks
34
Charles Barkley
PF
N/A
15
Nikola Jokić
PF
Denver Nuggets
0
Russell Westbrook
PG
Houston Rockets
7
Kevin Durant
PF
Brooklyn Nets
13
James Harden
PG/SG
Houston Rockets
13
Paul George
SG
Los Angeles Clippers
25
Ben Simmons
PG
Philadelphia 76ers
2
Kawhi Leonard
SG/SF
Los Angeles Clippers
21
Joel Embiid
C
Philadelphia 76ers
34
Giannis Antetokounmpo
PF
Milwaukee Bucks
30
Stephen Curry
PG
Golden State Warriors
11
Klay Thompson
SG
Golden State Warriors
23
Anthony Davis
PF
Los Angeles Lakers
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;

	rowSelection = false;

}
<gui-grid [columns]="columns"
		  [rowSelection]="rowSelection"
		  [source]="source">
</gui-grid>
[
    {
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

Selection type

The grid offers different types of selection:

  • GuiRowSelectionType.ROW
  • GuiRowSelectionType.CHECKBOX
Example
row-select.component.ts
row-select.component.html
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
@Component({
	template: `
		<button gui-button (click)="toggleRowSelectionType()">
			Change row selection Type
		</button>

		<gui-grid [columns]="columns"
				  [source]="users"
				  [rowSelection]="rowSelection">
		</gui-grid>
	`
})
export class RowSelectTypeComponent {

	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'
    }];

	rowSelection: boolean | GuiRowSelection = {
		enabled: true,
		type: GuiRowSelectionType.CHECKBOX 
	};
	
		toggleRowSelectionType(): void {
		if (this.rowSelection.type === GuiRowSelectionType.ROW) {
			this.rowSelection = {
				...this.rowSelection,
				type: GuiRowSelectionType.CHECKBOX
			};
		} else if (this.rowSelection.type === GuiRowSelectionType.CHECKBOX) {
			this.rowSelection = {
				...this.rowSelection,
				type: GuiRowSelectionType.ROW
			};
		}
	}
}

		<button gui-button (click)="toggleRowSelectionType()">
			Change row selection Type
		</button>

		<gui-grid [columns]="columns"
				  [source]="users"
				  [rowSelection]="rowSelection">
		</gui-grid>
	
[
    {
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

Selection mode

The grid enables to switch between two selection modes. One is GuiRowSelectionMode.SINGLEwhich allows to select only one row at a time. This option is enabled by default. The other one is GuiRowSelectionMode.MULTIPLE which allows to select multiple rows at the same time.

  • GuiRowSelectionMode.SINGLE
  • GuiRowSelectionMode.MULTIPLE
Example
row-select.component.ts
row-select.component.html
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
@Component({
	template: `
		<button gui-button (click)="toggleRowSelectionMode()">
			Change row selection Mode
		</button>

		<gui-grid [columns]="columns"
				  [source]="users"
				  [rowSelection]="rowSelection">
		</gui-grid>
	`
})
export class RowSelectModeComponent {

	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'
    }];

	rowSelection: boolean | GuiRowSelection = {
		enabled: true,
		type: GuiRowSelectionType.CHECKBOX
		mode: GuiRowSelectionMode.MULTIPLE, 
	};
	
		toggleRowSelectionMode(): void {
		if (this.rowSelection.mode === GuiRowSelectionMode.MULTIPLE) {
			this.rowSelection = {
				...this.rowSelection,
				mode: GuiRowSelectionMode.SINGLE
			};
		} else if (this.rowSelection.mode === GuiRowSelectionMode.SINGLE) {
			this.rowSelection = {
				...this.rowSelection,
				mode: GuiRowSelectionMode.MULTIPLE
			};
		}
	}
}

		<button gui-button (click)="toggleRowSelectionMode()">
			Change row selection Mode
		</button>

		<gui-grid [columns]="columns"
				  [source]="users"
				  [rowSelection]="rowSelection">
		</gui-grid>
	
[
    {
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

Changes on selectedRows

Every time user selects different row, grid return list of selected rows via @Output() selectedRows. It's possible to run some code using information about selected rows. Below you can see an example where every user can delete selected rows.

Example
row-select.component.ts
row-select.component.html
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
@Component({
	template: `
		<button gui-button [disabled]="rows.length === 0" (click)="deleteRow()">Delete selected rows</button>

		<gui-grid [columns]="columns"
				  [source]="users"
				  [rowSelection]="rowSelection"
				  (selectedRows)="onSelectedRows($event)">
		</gui-grid>
	`
})
export class RowSelectModeComponent {

	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'
    }];

	rowSelection: boolean | GuiRowSelection = {
		enabled: true,
		type: GuiRowSelectionType.CHECKBOX
		mode: GuiRowSelectionMode.MULTIPLE, 
	};
	
	
	onSelectedRows(rows: Array<GuiSelectedRow>): void {
		this.rows = rows;

		const names = rows.map(m => m.data.name).join(', ');

		this.fabricNotificationsService.open(`Rows with values ${names} are selected.`, {
			timer: { duration: 10000 }
		});
	}
}

		<button gui-button [disabled]="rows.length === 0" (click)="deleteRow()">Delete selected rows</button>

		<gui-grid [columns]="columns"
				  [source]="users"
				  [rowSelection]="rowSelection"
				  (selectedRows)="onSelectedRows($event)">
		</gui-grid>
	
[
    {
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

Row select - Inputs

InputTypeDefaultDescription
rowSelectingboolean | GuiRowSelectiontrue Configuration for row selection. Passing boolean true or false will enable or disable row selection.
enabledbooleantrue Enables / disables rows selection.
modestring | GuiRowSelectionModeGuiRowSelectionMode.SINGLE

Sets mode of row selection.

  • GuiRowSelectionMode.SINGLE
  • GuiRowSelectionMode.MULTIPLE
typestring | GuiRowSelectionTypeGuiRowSelectionType.ROW

Sets type of row selection.

  • GuiRowSelectionType.ROW
  • GuiRowSelectionType.CHECKBOX

Related articles:

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