Cell Editing

The cell editing function allows you to modify data directly from the grid itself. When the function is enabled, just simply click on one of the cells and grid will go into edit mode. Now you can change the value by typing a new one and pressing enter. After that, you can notice that the value has changed in the selected cell. You can, also cancel the change by pressing the 'escape' key on your keyboard.

To enable this feature you have to set config cellEditing to true.

You can set up various outputs in Generic UI Grid. If you want to be informed when one of the values has changed, you need to use sourceEdited output. The grid can also emit these information:

  • when a user enters into cell edit mode,
  • submits the change,
  • cancels the change.

By observing one of these outputs you can do something with it e.g. send it to the server.

Cell Editing Example
cell-editing.component.ts
cell-editing.component.html
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
@Component({
	selector: 'cell-editing-grid',
	templateUrl: './cell-editing-grid.component.html'
})
export class DocsCellEditingGridComponent {

	columns: Array<GuiColumn> = [{
		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;

}
<gui-grid [cellEditing]="true"
		  [maxHeight]="300"
		  [columns]="columns"
		  [source]="source">
</gui-grid>

Cell editing - row & cell access

Cell Editing Example
cell-editing.component.ts
cell-editing.component.html
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 { GuiCellEdit, GuiCellView, GuiColumn } from '@generic-ui/ngx-grid';


@Component({
	selector: 'cell-editing-grid',
	templateUrl: './cell-editing-grid.component.html'
})
export class NgDocsCellEditingAccessGridComponent {

	cellEditing: GuiCellEdit = {

		enabled: true,

		rowEdit: (value: any, item: any, index: number) => {
			return Boolean(index % 2);
		},

		cellEdit: (value: any, item: any, index: number) => {
			return Boolean(index % 5);
		}
	}

	columns: Array<GuiColumn> = [{
		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;

}
<gui-grid [cellEditing]="cellEditing"
		  [columns]="columns"
		  [maxHeight]="300"
		  [source]="source">
</gui-grid>
export interface GuiCellEdit {

	enabled?: boolean;

	rowEdit?: (value: any, item: any, index: number) => boolean;

	cellEdit?: (value: any, item: any, index: number) => boolean

}

Cell editing - Inputs

InputTypeDefaultDescription
cellEditing boolean | GuiCellEditfalse Turns on cell editing.

Cell editing - Outputs

OutputTypeDescription
sourceEdited {after: any, before: any} When source changes, grid emits value of previous and new values.
cellEditEntered void When user clicks on the cell it will go into edit mode and this output will emit event.
cellEditCanceled void When user cancels edit mode, this output will emit event.
cellEditSubmitted void When user submits change of the edited value, this output will emit event.

Related articles: