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.

@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

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

}