Edit Cell in Grid issue

[Duc]

Hi,

I am having with editing grid cell.

The issue is that once the cell is clicked, I can only type one character then the cursor disappears (lose focus on the cell I am typing). All other commands like add, remove, cancel works normally (especially the add when a new row is added for editing and saved).

My idea is to allow users to add/create/edit/remove data to the grid and then submit the grid data afterward.

I create a small project on GitHub to illustrate this: Could you help me point out the issue? 

Thanks.

[Duc]

Besides the full code as in the  repo above, here is the code I use for the component with :

Typescript file

import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {GridComponent} from '@progress/kendo-angular-grid';
import {FormGroup, FormControl} from '@angular/forms';


const DEFAULT_DATA = {
name: 'DemoGrid',
schema: [
{
idx: 0,
colName: 'Column1',
dataType: 'double'
},
{
idx: 1,
colName: 'Column2',
dataType: 'double'
}
],
data: [
[2500, -2500]
]
};

@Component({
selector: 'app-simple-grid',
templateUrl: './simple-grid.component.html',
styleUrls: ['./simple-grid.component.css']
})
export class SimpleGridComponent implements OnInit {
@Input() detailedData = DEFAULT_DATA;
@ViewChild('grid') private grid: GridComponent;

formGroup: FormGroup;
columnNames: string[];
private editedRowIndex: number;

constructor() { }

ngOnInit() {
this.columnNames = this.detailedData.schema.map(schemaItem => schemaItem.colName);
}

removeHandler({dataItem, rowIndex}) {
console.log('onRemove');
this.grid.cancelCell();
this.detailedData.data.splice(rowIndex, 1);
}

addHandler(e) {
console.log('onAdd');
this.formGroup = new FormGroup(this.columnNames.reduce((acc, col) => ({...acc, [col]: new FormControl()}), {}));
this.grid.addRow(this.formGroup);
}

cancelHandler({rowIndex}) {
console.log('onCancel');
this.closeEditor(this.grid, rowIndex);
}

cellClickHandler({rowIndex, dataItem, type}) {
console.log('onCellClick');
if (type === 'click') {
this.editHandler(rowIndex, dataItem);
}
}

editHandler(rowIndex: number, dataItem: any) {
if (this.formGroup) {
this.closeEditor(this.grid);
}

this.formGroup = new FormGroup(this.columnNames.reduce((acc, col) => ({...acc, [col]: new FormControl(dataItem[col])}), {}));
this.editedRowIndex = rowIndex;
this.grid.editRow(rowIndex, this.formGroup);
}

saveHandler({formGroup, rowIndex}) {
console.log('onSave');
if (formGroup.valid) {
if (this.editedRowIndex === rowIndex) {
this.detailedData.data[rowIndex] = this.convertDataItemToArray(formGroup.value);
} else {
this.detailedData.data.unshift(this.convertDataItemToArray(formGroup.value));
}
this.grid.closeRow(rowIndex);
}
}

closeEditor(grid, rowIndex = this.editedRowIndex) {
console.log('closeEditor');
grid.closeRow(rowIndex);
this.editedRowIndex = undefined;
this.formGroup = undefined;
}

convertDataItemToArray(dataItem: any) {
return this.columnNames.map(col => dataItem[col]);
}

convert(extendedData) {
const columnMapping = extendedData.schema.map(item => item.colName);
return extendedData.data.map((listData) => {
return columnMapping.reduce((acc, col, idx) => ({...acc, [col]: listData[idx]}), {});
});
}
}

HTML file

 
<kendo-grid #grid
[data]="convert(detailedData)"
[height]="410"
(cellClick)="cellClickHandler($event)"
(cancel)="cancelHandler($event)"
(remove)="removeHandler($event)"
(add)="addHandler($event)"
(save)="saveHandler($event)">

<ng-template kendoGridToolbarTemplate>
<button kendoGridAddCommand="">Add new</button>
</ng-template>

<ng-container *ngFor="let col of columnNames">
<kendo-grid-column field={{col}}></kendo-grid-column>
</ng-container>

<kendo-grid-command-column title="command" width="220">
<ng-template kendoGridCellTemplate let-isNew="isNew">
<button kendoGridRemoveCommand>Remove</button>
<button kendoGridSaveCommand>Add/Update</button>
<button kendoGridCancelCommand>Cancel</button>
</ng-template>
</kendo-grid-command-column>

</kendo-grid>

 

 

 

 

 

 

 

[Svet]

Hi Duc,

The repo does not seem to have made it through to us. 

I would suggest to check the "In-Cell Editing" example from the following article of our documentation:
https://www.telerik.com/kendo-angular-ui/components/grid/editing/in-cell-editing/

It represents an editable grid, where all changes, that we introduce to the grid like add, update, delete row are stored in a batch and only after we click the "Save Changes" button, a request is sent the server to save the latest introduced changes.

I hope this helps.

Regards,
Svetlin
Progress Telerik