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 informations:

  • 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 BryantSG Los Angeles Lakers 1 Tracy McGradySG Houston Rockets 23 Lebron JamesPF Los Angeles Lakers 3 Dwayne WadeSG Miami Heat 15 Vince CarterSG Atlanta Hawks 34 Charles BarkleyPF N/A 15 Nikola JokićPF Denver Nuggets 0 Russell WestbrookPG Houston Rockets 7 Kevin DurantPF Brooklyn Nets 13 James HardenPG/SG Houston Rockets 13 Paul GeorgeSG Los Angeles Clippers 25 Ben SimmonsPG Philadelphia 76ers 2 Kawhi LeonardSG/SF Los Angeles Clippers 21 Joel EmbiidC Philadelphia 76ers 34 Giannis AntetokounmpoPF Milwaukee Bucks 30 Stephen CurryPG Golden State Warriors 11 Klay ThompsonSG Golden State Warriors 23 Anthony DavisPF 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>

Inputs

NameDescription
cellEditing: boolean; Turns on cell editing.

Outputs

NameDescription
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:






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