Focus on selected cell when starting to edit row

[Niels Van Goethem]

Dear,

I have a grid, that contains editTemplates. What I want to achieve is, is to focus on the cell that the user clicked on when entering edit mode for that row.

I currently have this:

public recordDoubleClick(args: RecordDoubleClickEventArgs) {

    console.log('🚀 ~ ProcessTabItemComponent ~ recordDoubleClick ~ args.column:', args);

    this.focusField = args.column.field;

  }

public onActionComplete(args: SaveEventArgs) {

    if (args.requestType === 'beginEdit') {

      console.log(

        '🚀 ~ ProcessTabItemComponent ~ onActionComplete ~ args.form.elements.namedItem(this.focusField):',

        args.form.elements

      );

      (args.form.elements.namedItem(this.focusField) as any).focus();

    }

}

    <e-column

      field="attachedThemeIds"

      [headerText]="'Processes.Headers.Themes' | translate"

      [allowSorting]="false"

      width="120"

    >

      <ng-template #template let-data>

        {{ data.attachedThemeIds | mapIdsToNames: themes }}

      </ng-template>

      <ng-template #editTemplate let-data>

        <ejs-multiselect

          [dataSource]="themes"

          [fields]="themeFields"

          [(value)]="selectedThemeIds[data?.id ?? -1]"

        ></ejs-multiselect>

      </ng-template>

    </e-column>

But the problem is that the name of the template is not the same as the fieldname of that cell.

[Aishwarya Rameshbabu]

Hi Niels Van Goethem,

Greetings from Syncfusion support.

Based on the provided information and code sample, it has been observed that you are employing a MultiSelectDropDown component as an editTemplate for a column within the Grid. You aim to focus on the cell from which the selection was initiated for editing. However, you are encountering an issue with retrieving the MultiSelect element using the name attribute. To address this issue, you need to define the name property for the component rendered as a template. Please refer to the code example and sample below, which illustrate how to focus on the selected cells for editing and even the cells that contains MultiSelectDropDown as a editTemplate.

App.component.ts

    public recordDoubleClick(args: RecordDoubleClickEventArgs) {

        this.focusField = args.column.field;

    }

    public actionComplete(args: SaveEventArgs) {

        if (args.requestType === 'beginEdit') {

            setTimeout(() => {

                let formElement: HTMLFormElement = (args.form.elements.namedItem(this.focusField) as HTMLFormElement);

                if (this.focusField === 'ShipCity') {

                    let multiSelectElem: Element = closest(formElement, '.e-control');

                    (multiSelectElem as any).ej2_instances[0].focusIn();

                }

                else {

                    formElement.focus();

                }

            }, 0);

        }

    }

 

Sample: Inifuz (forked) - StackBlitz

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R