Set Focus to Specific Cell in Normal Edit Grid Mode

Question

Sir, I understand in Dialog Edit mode that I can set the focus to the edited cell as per your documentation here https://ej2.syncfusion.com/angular/documentation/grid/edit/#set-focus-to-editor

However, when the Grid mode is set to Edit Mode "Normal', that solution does not work.

1) How can I set the focus to a cell by its name in Normal Edit mode when double clicking to enter edit mode

2) I wish to set the focus to the cell that I double clicked. Is the following the best way?

a) Subscribe to DoubleClick event

b) Get field name of the cell that was double clicked by the cell index from the RecordDoubleClickEventArgs, then get the column field name from .getColumnByIndex

c) Set the focus as per your solution my question (1) above

Thankyou,

James

Gokul Ramalingam · Answer

Hi James,

Greetings from Syncfusion Support.

Query: can I set the focus to a cell by its name in Normal Edit mode when double clicking to enter edit mode?

Yes, you can achieve your requirement using the double click event. You can use the recordDoubleClick event of Grid to get the column name and use the actionComplete event to set the Focus of the element. We have prepared a sample of your requirement. Please refer to the below code snippet and sample link for more information.

<ejs-grid #normalgrid id='Normalgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' (recordDoubleClick)='onDoubleClick($event)'

(actionComplete)='actionComplete($event)' [toolbar]='toolbar' (actionBegin)='actionBegin($event)'>

…………….

</ejs-grid>

[app.component.ts]

onDoubleClick(args: any): void{

this.setFocus = args.column; // Get the column from Double click event

}

actionComplete(e: any): void{

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

e.form.elements.namedItem(this.setFocus.field).focus(); // Set focus to the Target element

}

Sample Link: https://stackblitz.com/edit/angular-cha1xd?file=app.component.ts

Please get back to us if you need further assistance.

Regards,

Gokul R

Nataliya · Answer

Hi, guys, the code above works until I use additionally editType= 'numericedit'. Pls, advise, how to keep both auto increase of
cell and make focus working, thanks in advance

Rajapandi Ravi · Answer

Hi Nataliya, 

Thanks for the update 

Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information. 





[app.component.ts] 
 
actionComplete(e: any): void { 
    if (e.requestType === 'beginEdit') { 
      e.form.querySelector('#'+this.normalgrid.element.id+this.setFocus.field).focus(); 
    } 
  } 

Sample: https://stackblitz.com/edit/angular-cha1xd-ygmhyf?file=app.component.ts 

Regards, 
Rajapandi R

Nataliya · Answer

hi again, tnx for response, this was fixed, but noticed that custom dropdown is not working, for example, setFocus called "threatEffect", but in e.form such element is not even present and I get"Cannot read property 'focus' of null"

Rajapandi Ravi · Answer

Hi Nataliya, 

Thanks for the update  

Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information. 





 
actionComplete(e: any): void { 
      if (e.requestType === 'beginEdit') {  
        if (this.setFocus.field === 'ShipCountry') { 
          setTimeout(function(e){  
            e.form.elements[6].focus(); 
            }.bind(this),0, e); 
        } 
        else { 
          e.form.querySelector('#' + this.normalgrid.element.id + this.setFocus.field).focus(); 
        } 
    }  
    } 

Sample: https://stackblitz.com/edit/angular-rbjfw5-h8tuxz?file=app.component.ts 

Regards,Rajapandi R