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.

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
    }, ...
]

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
    }, ...
]

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
    }, ...
]

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
    }, ...
]

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
    }, ...
]

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
    }, ...
]

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
    }, ...
]

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;

InputTypeDefaultDescription
rowSelectionboolean | GuiRowSelectiontrue Configuration for row selection. Passing boolean true or false will enable or disable row selection.
enabledbooleantrue Enables / disables rows selection.
selectedRowIdsany[][] Array of selected rows by the ids.
selectedRowIndexesnumber[][] Array of selected rows by the index.
modestring | GuiRowSelectionModeGuiRowSelectionMode.SINGLE

Sets mode of row selection.

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

Sets type of row selection.

  • GuiRowSelectionType.ROW
  • GuiRowSelectionType.CHECKBOX
  • GuiRowSelectionType.RADIO
matcherstring | GuiRowSelectionIdMatcher'id'

Sets function that determines the id field in the source item.