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;

	selectedRowIndexes?: Array<number>,

	selectedRowIds?: Array<any>,

	type?: string | GuiRowSelectionType;

	mode?: string | GuiRowSelectionMode;

	matcher?: string | GuiRowSelectionIdMatcher;

}

export type GuiRowSelectionIdMatcher = (item: any) => any;

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

Number

Name

Position

Team

Kobe Bryant

Los Angeles Lakers

Tracy McGrady

Houston Rockets

Lebron James

Los Angeles Lakers

Dwayne Wade

Miami Heat

Vince Carter

Atlanta Hawks

Charles Barkley

N/A

Nikola Jokić

Denver Nuggets

Russell Westbrook

Houston Rockets

Kevin Durant

Brooklyn Nets

James Harden

PG/SG

Houston Rockets

Paul George

Los Angeles Clippers

Ben Simmons

Philadelphia 76ers

Kawhi Leonard

SG/SF

Los Angeles Clippers

Joel Embiid

Philadelphia 76ers

Giannis Antetokounmpo

Milwaukee Bucks

Stephen Curry

Golden State Warriors

Klay Thompson

Golden State Warriors

Anthony Davis

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>

[
    {
        "id": "#1",
        "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
GuiRowSelectionType.RADIO

import { Component } from '@angular/core';

@Component({
	templateUrl: `./row-select.component.html`
})
export class RowSelectTypeComponent {

	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'
    }];
			
	rowSelection: boolean | GuiRowSelection = {
		enabled: true,
		type: GuiRowSelectionType.CHECKBOX 
	};
	
	types = [
		{ name: 'ROW', value: 'row' },
		{ name: 'CHECKBOX', value: 'checkbox' },
		{ name: 'RADIO', value: 'radio' }
	];

	changePageSize(option: GuiSelectOption) {
		this.rowSelection = {
			...this.rowSelection,
			type: option.value
		};
	}
}

<gui-select (optionChanged)="changePageSize($event)"
	[options]="types"
	[selected]="types[1]">
</gui-select>

<gui-grid [columns]="columns"
		  [source]="users"
		  [rowSelection]="rowSelection">
</gui-grid>

[
    {
        "id": "#1",
        "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

import { Component } from '@angular/core';

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

[
    {
        "id": "#1",
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

Selected row by ids

You can select rows at the start by specifying selected ids.

import { Component } from '@angular/core';

@Component({
	templateUrl: `./row-select.component.html`
})
export class SelectedRowIdsComponent {

	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'
    }];
			
	rowSelection: boolean | GuiRowSelection = {
		enabled: true,
		type: GuiRowSelectionType.CHECKBOX
		mode: GuiRowSelectionMode.MULTIPLE,
		selectedRowIds: ['#2','#4'], 
	};
	
	
}

<gui-grid [columns]="columns"
		  [source]="users"
		  [rowSelection]="rowSelection">
</gui-grid>

[
    {
        "id": "#1",
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

Matcher

You can configure field by witch grid will make selection. In the example below gird will select rows based on team name.

import { Component } from '@angular/core';

@Component({
	templateUrl: `./row-select.component.html`
})
export class SelectedRowIdsComponent {

	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'
    }];
			
	rowSelection: boolean | GuiRowSelection = {
		enabled: true,
		type: GuiRowSelectionType.CHECKBOX
		mode: GuiRowSelectionMode.MULTIPLE,
		matcher: item=>item.teamShort,
		selectedRowIds: ['KN','CR'], 
	};
	
	
}

<gui-grid [columns]="columns"
		  [source]="users"
		  [rowSelection]="rowSelection">
</gui-grid>

[
    {
        "id": "#1",
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

Selected row by indexes

You can select rows at the start by specifying selected indexes.

import { Component } from '@angular/core';

@Component({
	templateUrl: `./row-select.component.html`
})
export class SelectedRowIndexesComponent {

	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'
    }];
			
	rowSelection: boolean | GuiRowSelection = {
		enabled: true,
		type: GuiRowSelectionType.CHECKBOX
		selectedRowIndexes: [0,2],
		mode: GuiRowSelectionMode.MULTIPLE, 
	};
	
	
}

<gui-grid [columns]="columns"
		  [source]="users"
		  [rowSelection]="rowSelection">
</gui-grid>

[
    {
        "id": "#1",
        "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.

import { Component } from '@angular/core';

@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: 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'
    }];
			
	rowSelection: boolean | GuiRowSelection = {
		enabled: true,
		type: GuiRowSelectionType.CHECKBOX
		mode: GuiRowSelectionMode.MULTIPLE, 
	};
	
	
	onSelectedRows(rows: Array<GuiSelectedRow>): void {
		this.rows = rows;

		const names = rows.map((m: GuiSelectedRow) => m.source.name).join(', '),
			text = `Rows with values ${names} ${rows.length > 1 ? 'are' : 'is'} selected.`

		this.fabricNotificationsService.open(text, {
			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>

[
    {
        "id": "#1",
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

Grid rowSelection

export interface GuiRowSelection {

	enabled?: boolean;

	selectedRowIndexes?: Array<number>,

	selectedRowIds?: Array<any>,

	type?: string | GuiRowSelectionType;

	mode?: string | GuiRowSelectionMode;

	matcher?: string | GuiRowSelectionIdMatcher;

}

export type GuiRowSelectionIdMatcher = (item: any) => any;

Row select - Inputs

Input	Type	Default	Description
rowSelection	boolean \| GuiRowSelection	`true`	Configuration for row selection. Passing boolean true or false will enable or disable row selection.
enabled	boolean	`true`	Enables / disables rows selection.
selectedRowIds	any[]	`[]`	Array of selected rows by the ids.
selectedRowIndexes	number[]	`[]`	Array of selected rows by the index.
mode	string \| GuiRowSelectionMode	`GuiRowSelectionMode.SINGLE`	Sets mode of row selection. GuiRowSelectionMode.SINGLE GuiRowSelectionMode.MULTIPLE
type	string \| GuiRowSelectionType	`GuiRowSelectionType.ROW`	Sets type of row selection. GuiRowSelectionType.ROW GuiRowSelectionType.CHECKBOX GuiRowSelectionType.RADIO
matcher	string \| GuiRowSelectionIdMatcher	`'id'`	Sets function that determines the id field in the source item.

Row Select

Selection type

Selection mode

Selected row by ids

Matcher

Selected row by indexes

Changes on selectedRows

Grid rowSelection

Row select - Inputs

Related articles: