Set focus to editable cell using inline edit row

[Chau]

I have a kendo-grid with 3 columns editable out of the list of 25 columns displayed.

The grid has a cellClick event which sends in the column and columnIndex:

(cellClick)="editClick($event)"

public editClick({ sender, column, rowIndex, columnIndex, dataItem }): void {

    this.editHandler({
                dataItem: dataItem,
                rowIndex: rowIndex,
                sender: sender,
                isNew: false
            });

}
public editHandler({ sender, rowIndex, dataItem }: EditEvent): void {
        if (this.formGroup && !this.formGroup.valid) {
            return;
        }

this.formGroup = formGroup(dataItem);
        this.editedRowIndex = rowIndex;

        console.log('editrowindex =' + rowIndex);
        console.log('edited CDM_Service_Code =' + dataItem.CDM_Service_Code);

        sender.editRow(rowIndex, this.formGroup);

When I call sender.editRow

[Chau]

When I call sender.editRow, the row is rendered editable for the 3 columns specified in the formGroup.

Is there a way to set the focus to one of those editable cells?

Thanks for any suggestion.

[Chau]

When I call sender.editRow, the row is rendered editable with the 3 columns specified in the formGroup.

Is there a way to set focus to one of those 3 editable cells?

Thanks for any suggestion.

[Dimiter Topalov]

Hello Chau,

You can use the edit event handler to focus the desired input programmatically in a setTimeout callback (to ensure that the edit row's inputs are rendered so you can focus the one you need). A similar approach is demonstrated in the following how to article from our documenattion:

https://www.telerik.com/kendo-angular-ui-develop/components/grid/how-to/focus-clicked-cell-in-row-editing/

It shows how to focus the editor, corresponding to the clicked cell, but you can adapt it slightly by providing the desired column index in the following method:

public editHandler({ sender, colIndex, rowIndex, dataItem }: EditEvent): void {
        if (this.formGroup && !this.formGroup.valid) {
            return;
        }

        this.saveRow();
        this.formGroup = formGroup(dataItem);
        this.editedRowIndex = rowIndex;
        sender.editRow(rowIndex, this.formGroup);
        setTimeout(() => {
          // set a custom colIndex and pass it to the method below
          document.querySelector(`.k-grid-edit-row > td:nth-child(${colIndex + 1}) input`).focus();
        });
    }

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Chau]

Thanks Dimiter for your quick reply!

I am getting 2 Build errors:

1) for adding the param colIndex to: public editHandler({ sender, colIndex, rowIndex, dataItem }: EditEvent): void { ... 

===> Build:Type 'EditEvent' has no property 'colIndex' and no string index signature.

2) for calling the focus in this line of code: setTimeout(() => {
            console.log(colIndex);
            document.querySelector(`.k-grid-edit-row > td:nth-child(${colIndex + 1}) input`).focus();
        });

===> Property 'focus' does not exist on type 'Element'

I am using these versions of progress library, are these versions outdated?

 "@progress/kendo-angular-buttons": "^2.0.0",
    "@progress/kendo-angular-dateinputs": "^1.3.0",
    "@progress/kendo-angular-dialog": "^1.3.0",
    "@progress/kendo-angular-dropdowns": "^1.2.2",
    "@progress/kendo-angular-excel-export": "^1.0.4",
    "@progress/kendo-angular-grid": "^1.5.0",
    "@progress/kendo-angular-inputs": "^1.3.1",
    "@progress/kendo-angular-intl": "^1.2.2",
    "@progress/kendo-angular-l10n": "^1.0.4",
    "@progress/kendo-data-query": "^1.0.7",
    "@progress/kendo-drawing": "^1.4.0",
    "@progress/kendo-theme-default": "^2.43.1",

 

[Dimiter Topalov]

Hello Chau,

The described issues are TypeScript-related errors that can be addressed by type casting or removing certain types, e.g.:

1) The EditEvent indeed does not have a colIndex property:

https://www.telerik.com/kendo-angular-ui/components/grid/api/EditEvent/

As the discussed scenario involves custom logic, necessitating the use of colIndex in the editHandler, the most straight-forward approach would be to declare the parameter of type "any":

 editHandler({ sender, colIndex, rowIndex, dataItem }: any): void { ...

... or create a custom type/interface for this purpose only.

2) The type, returned from this method call:

document.querySelector(`.k-grid-edit-row > td:nth-child(${colIndex + 1}) input`)

... is "Element" (as opposed to HTMLElement, as the compiler cannot be sure what type of DOM element will be selected). HTMLElement is a subclass of Element that adds additional methods like "focus()":

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

You can cast the result of the querySelector() method to HTMLElement type as follows:

(<HTMLElement>document.querySelector('.k...')).focus()

... or:

(document.querySelector('.k...') as HTMLElement).focus()

Regards,
Dimiter Topalov
Progress Telerik

[Nikolaos]

Hi Dimiter,

I tried to implement the above solution in order to focus the clicked cell in an edited row.

My problem is that document.querySelector is too slow, takes more than 2 seconds to locate the clicked cell.

Is there another way to focus the clicked cell in edited row?

I am using grid.editRow.

Is there a way to know when editRow is finished?

 

Thanks

[Svet]

Hi Nikolaos,

I opened a new private ticket for this case In order to keep a clean forum history. Let's keep any future communication there.

Regards,
Svetlin
Progress Telerik