We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize navigation through the grid using Enter key

Thread ID:

Created:

Updated:

Platform:

Replies:

141989 Jan 14,2019 08:21 AM UTC Feb 28,2019 12:33 PM UTC Angular - EJ 2 20
loading
Tags: Grid
Sahal
Asked On January 14, 2019 08:21 AM UTC

 Hi,

I would like to navigate using the enter key in edit mode( both batch end normal edit)
My sample use case would be
Suppose there are 10 columns in a grid on each enter key I would like to shift from col 6 to col 8 to col9 and then col6 of next row.

Also in batch edit mode is there a way to change the value of another cell based on the edited cell(dropdown)

Thavasianand Sankaranarayanan [Syncfusion]
Replied On January 16, 2019 11:30 AM UTC

Hi Sahal, 
 
Greetings from Syncfusion. 
 
We have checked your query and you can achieve your requirement by using the following workaround.  
 
Query 1: Suppose there are 10 columns in a grid on each enter key I would like to shift from col 6 to col 8 to col9 and then col6 of next row. 
 
In the following sample we have saved the current editing cell and edited the next required cell by using the keyDown event. 
 
Batch.editing.component.ts: 

   ngAfterViewInit(args: any): void {         
        document.getElementById('grid').addEventListener('keydown', () => {   
                this.grid.editModule.saveCell(); 
                var index = this.grid.selectedRowIndex; 
                var field; 
                if ((window as any).field === 'EmployeeID') {  // 6th column 
                     field = 'ShipName'; 
                } 
                if ((window as any).field === 'ShipName') {  // 8th column 
                     field = 'CustomerID'; 
                } 
                if ((window as any).field === 'CustomerID') { // 9th column 
                    index++; 
                    field = 'EmployeeID'; 
                } 
                if((window as any).field ==='EmployeeID' || (window as any).field ==='ShipName' || (window as any).field ==='CustomerID') { 
                    this.grid.editModule.editCell(index, field); 
                } 
        }) 
      } 

Query 2: Is there a way to change the value of another cell based on the edited cell(dropdown) ? 

We have achieved your requirement by using the cellSave event and setCellValue method of grid. 
Parameter for setCellValue method:  setCellValue(key,field,Value); 

    cellSave(args): void { 
          if (args.columnName === 'ShipCountry' && args.value ==='Austria') { 
            this.grid.setCellValue(args.rowData.OrderID,"CustomerID",'Modified Value'); 
          } 
          (window as any).field = args.columnName; 
    } 

Please find the attached sample for your reference. 

Refer the help documentation. 




Regards, 
Thavasianand S. 


Sahal
Replied On January 16, 2019 12:44 PM UTC

Superb! Works great
Thank you Thavasianand 

Thavasianand Sankaranarayanan [Syncfusion]
Replied On January 16, 2019 12:47 PM UTC

Hi Sahal, 
 
We are happy that the problem has been solved. 
 
Please get back to us if you need any further assistance.  
                          
Regards, 
Thavasianand S.

Sahal
Replied On January 28, 2019 12:56 PM UTC

Hi Sahal, 
 
We are happy that the problem has been solved. 
 
Please get back to us if you need any further assistance.  
                          
Regards, 
Thavasianand S.

Hi Thavasianand Sankaranarayanan,

I am facing an issue when I try to add a new row when the navigation reaches the last row 
if ((window as any).field === 'CNTRDCredit') { // last column
if (index == this.grid.getRows().length - 1){ //check if its last row
this.grid.editModule.addRecord();
}
index++;
field = 'CNTRDAccHeadId';
}

I tried the above code. Although the above code adds a new row, the focus is not shifted to the new row.



Thavasianand Sankaranarayanan [Syncfusion]
Replied On January 29, 2019 10:35 AM UTC

Hi Sahal, 

Thanks for your update. 

We have validated the provided information and checked with our end and its working fine at our sample. Could you please provide more or below details it will helpful for us to provide a better solution as soon as possible. 



  1. By default, we have focused newly added rows first column(do you want to focus particular field(as your wish)?)
  2. Did you specified newRowPosition  as top or bottom in Grid ?
  3. Share the Grid package and code example for further analysis.
  4. If possible reproduce the reported problem at our sample.

Regards, 
Thavasianand S. 


Sahal
Replied On January 29, 2019 11:21 AM UTC

Hi

I am adding the row to the bottom position. I need the focus to the column that is included in our navigation using the enter key, The following is the code I was trying on 

https://stackblitz.com/edit/angular-3prvk7-vdgiuf

ngAfterViewInit(args: any): void {
document.getElementById('grid').addEventListener('keydown', () => {
debugger
this.grid.editModule.saveCell();
var index = this.grid.selectedRowIndex;
var field;
if ((window as any).field === 'EmployeeID') {
field = 'ShipName';
}
if ((window as any).field === 'ShipName') {
field = 'CustomerID';
}
if ((window as any).field === 'CustomerID') {
if (index == this.grid.getRows().length - 1) { //check if its last row
this.grid.editModule.addRecord();
}
index++;
field = 'EmployeeID';
}
if ((window as any).field === 'EmployeeID' || (window as any).field === 'ShipName' || (window as any).field === 'CustomerID') {
this.grid.editModule.editCell(index, field);
}
})
}





Thavasianand Sankaranarayanan [Syncfusion]
Replied On January 29, 2019 12:31 PM UTC

Hi Sahal, 

We have validated the provided information and we suggest you to use the below way to achieve your requirement. In the below sample, we have set index as 0 while addRecord in Grid to achieve your requirement. 

document.getElementById('grid').addEventListener('keydown', () => { 
    this.grid.editModule.saveCell(); 
    var index = this.grid.selectedRowIndex; 
    var field; 
    if ((window as any).field === 'EmployeeID') { 
        field = 'ShipName'; 
    } 
    if ((window as any).field === 'ShipName') { 
        field = 'CustomerID'; 
    } 
    if ((window as any).field === 'CustomerID') { 
        if (index == this.grid.getRows().length - 1) { //check if its last row 
            this.grid.editModule.addRecord(); 
        } 
        // because the newly added row at the top of the position 
        index = 0; 
        field = 'EmployeeID';  
    } 
    if ((window as any).field === 'EmployeeID' || (window as any).field === 'ShipName' || (window as any).field === 'CustomerID') { 
        this.grid.editModule.editCell(index, field); 
    } 
 
}) 
} 



Note: If you are using index++ then we suggest you to set newRowPosition as Bottom to achieve this. 



Regards, 
Thavasianand S. 


Sahal
Replied On February 4, 2019 12:17 PM UTC

My requirement is for adding rows at the bottom of the grid.

In the sample you provided (adding rows at the top of the column) if you test it you can see that if you keep pressing the enter key on the newly added row, it won't create  the next row.

The issue will be similar when we start with a blank grid,

It has something to do with the batch edit mode, because the navigation works only for those rows batchSave() is done

Thavasianand Sankaranarayanan [Syncfusion]
Replied On February 5, 2019 11:28 AM UTC

Hi Sahal, 

Thanks for your update. 

We have validated your query and we suggest you to use the below way to resolve the reported problem . In the below sample, we have add the new row at the bottom position as well as addRecord when index is greater than or equal to grid rows length. 

Please refer the below code example and sample for more information. 
ngAfterViewInit(args: any): void { 
    document.getElementById('grid').addEventListener('keydown', () => { 
      this.grid.editModule.saveCell(); 
      var index = this.grid.selectedRowIndex; 
      var field; 
      if ((window as any).field === 'EmployeeID') { 
        field = 'ShipName'; 
      } 
      if ((window as any).field === 'ShipName') { 
        field = 'CustomerID'; 
      } 
      if ((window as any).field === 'CustomerID') { 
        if (index >= this.grid.getRows().length - 1) { //check if its last row or newly added row 
          this.grid.editModule.addRecord(); 
        } 
        index++; 
        field = 'EmployeeID'; 
      } 
      if ((window as any).field === 'EmployeeID' || (window as any).field === 'ShipName' || (window as any).field === 'CustomerID') { 
        this.grid.editModule.editCell(index, field); 
      } 
    }) 
  } 



Regards, 
Thavasianand S. 


Sahal
Replied On February 5, 2019 04:09 PM UTC

Thank you Thavasianand,
Your solution works but there are a couple of issues I have identified
  1. New row is being added if the user navigates through any of the unsaved row( not just the last row)
  2. Its not working as expected when user add a row using the add button. The first row added to the grid(new or a grid whose batchSave() has been called) using the add button always faces this issue.
Another query, Could you please provide a sample in which the similar use case is met when the grid is in normal edit mode. (If a new thread needs to be started, I can do that)

Thavasianand Sankaranarayanan [Syncfusion]
Replied On February 6, 2019 12:30 PM UTC

Hi Sahal, 

Query 1: New row is being added if the user navigates through any of the unsaved row( not just the last row) 
 
We have validated with our end and we suggest you to check the index is greater than or equal getRows().length from contentModule.  Please refer the below code example and updated sample for more information. 

if ((window as any).field === 'CustomerID') { 
    if (index >= this.grid.contentModule.getRows().length - 1) { //check if its last row 
        this.grid.editModule.addRecord(); 
    } 
    index++; 
    field = 'EmployeeID'; 
} 


Query 2: Its not working as expected when user add a row using the add button 
 
By default, When add new records in Grid then we focused on the first column(OrderID) so we suggest you call the edit cell method in keydown event even if we have the window.field as “OrderID” . In previous case we have not handled when field as “OrderID” so that it does not the operations are skipped and did not perform anything. 

Please check the updated sample for more information 


Query 3:  Could you please provide a sample in which the similar use case is met when the grid is in normal edit mode 
 
You can use addRecord method to add the record in inline editing and use startEdit and endEdit method to enable and save the edit cell in Inline Editing. 




Please get back to us if you need further assistance on this. 

Regards, 
Thavasianand S. 


Sahal
Replied On February 7, 2019 02:33 AM UTC

Thank you once again,
But there is one more issue I face with the grid, may be a potential bug.

When initializing a blank grid and a new row is added by using the add button the cell is not going into the edit mode. Even if we double click the cell to edit and try to navigate to the next cell the next cell also faces the same issue. I have prepared the sample given below


Regarding the reply you gave for the normal edit mode, could you explain how to navigate from cell to cell and then to next row.  It would be great  if you could prepare a working sample as you provided for the batch edit


Thavasianand Sankaranarayanan [Syncfusion]
Replied On February 7, 2019 01:33 PM UTC

Hi Sahal, 

Thanks for your update. 

Query : When initializing a blank grid and a new row is added by using the add button the cell is not going into the edit mode 

We have validated your query and we have already considered “Script error thrown when add records at the bottom of the Grid  and navigate to other cell” as a bug and logged a defect report for the same. The fix for the issue will be available on February 20, 2019 patch release.   

Query : could you explain how to navigate from cell to cell and then to next row 

As per your suggestion we have created sample for Inline edit mode. In the below sample, we have add new record at the bottom of Grid when press enter Key. You can also use the below way to achieve your requirement and you can navigate the cell in Grid by using tab key. 


Regards, 
Thavasianand S. 


Sahal
Replied On February 8, 2019 03:53 AM UTC

Hi

Thank you for identifying the bug and working on to fix it. Is there any way I could get the patch without waiting till the next release. 


Regarding the navigation using the inline edit, is there any way we could use the enter key to navigate rather that using the tab key( Pressing the tab key produces undesired results such as changing the focus to other parts of the window other than the grid)


What I am trying to achieve along this thread is a greater UX. The user must be able to add and edit the grid using the key board without much use of the mouse.

Could you please provide a solution for this.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On February 14, 2019 04:23 PM UTC

Hi Sahal, 
 
Query: Regarding the navigation using the inline edit, is there any way we could use the enter key to navigate rather that using the tab key( Pressing the tab key produces undesired results such as changing the focus to other parts of the window other than the grid) 
 
We have validated your query and created sample based on your requirement. Here, we have used enter key as tab in inline editing. Please find the below code example and sample for your reference. 
 
[code example] 
... 
 
@Component({ 
  ... 
 
}) 
export class BatchEditComponent implements OnInit { 
  ... 
 } 
 
  ngAfterViewInit(args: any): void { 
 
    document.getElementById('grid').addEventListener('keydown', function (e) { 
 
      if (e.keyCode == 13) { 
        (this.grid as any).keyConfigs.enter = ""; 
        (e.target as any).parentElement.classList.remove('e-input-focus'); 
        let currentEle: any = parentsUntil(e.target as any, 'e-rowcell'); 
        let currentIdx: any = (currentEle as any).cellIndex; 
        if (currentIdx == 4) { 
          this.grid.editModule.endEdit(); 
        } 
        else { 
          let gForm: any = parentsUntil(currentEle as any, 'e-gridform'); 
          let nextInput: any = gForm.querySelectorAll('input')[currentIdx + 1]; 
          nextInput.focus(); 
          nextInput.parentElement.classList.add('e-input-focus'); 
        } 
      } 
    }.bind(this)) 
  } 
 
} 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Thavasianand S. 


Sahal
Replied On February 15, 2019 12:08 PM UTC

Thank you Thavasianand. 

Your solution works. One quirk we face is when there are hidden columns in the grid. The value given by (currentEle as any).cellIndex will not match in the list of gForm.querySelectorAll('input')    

As asked earlier, is there a way to get the patch before the next release for the bug in the batch edit mode

Thanks a lot for your support. I really appreciate it.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On February 19, 2019 10:39 AM UTC

Hi Sahal, 

Thanks for your update. 

Query #1: One quirk we face is when there are hidden columns in the grid. The value given by (currentEle as any).cellIndex will not match in the list of gForm.querySelectorAll('input') 

We have analyzed your query and we suggest to get the visible cells input element for focusing in the keydown event to achieve your requirement. Please refer to the below sample for your reference, 

[.ts] 
... 
else { 
          let gForm: any = parentsUntil(currentEle as any, 'e-gridform'); 
          let nextInput: any; 
          if(gForm.querySelectorAll('td')[currentIdx + 1].classList.contains('e-hide')){ 
          nextInput = gForm.querySelectorAll('td')[currentIdx + 2].querySelector('input'); 
          } 
          else{ 
          nextInput = gForm.querySelectorAll('td')[currentIdx + 1].querySelector('input'); 
          } 
          nextInput.focus(); 
          nextInput.parentElement.classList.add('e-input-focus'); 
        }... 


Query #2: is there a way to get the patch before the next release for the bug in the batch edit mode 

Due to the complexities we had faced, the fix for ‘Script error thrown when add records at the bottom of the Grid  and navigate to other cell’ is postponed to Feb 27, 2019 patch release. We appreciate your patience until then. 

Regards, 
Thavasianand S. 


Sahal
Replied On February 20, 2019 10:40 AM UTC

Thanks for the update
I have a release scheduled for first of next month and was highly anticipating the patch release.

Please provide an update as soon as you have the fix

Thavasianand Sankaranarayanan [Syncfusion]
Replied On February 20, 2019 11:59 AM UTC

Hi Sahal, 

As we promised we will update the patch release detail on February 27th, 2019. 

Until then we apricate your patience. 

Regards, 
Thavasianand S. 


Thavasianand Sankaranarayanan [Syncfusion]
Replied On February 28, 2019 12:33 PM UTC

Hi Sahal, 
Thanks for your patience. 
We are glad to announce that our Essential JavaScript 2 patch release (16.4.55) has been rolled out successfully and in that release, we have added the fix for the issue “Script error thrown when add records at the bottom of the Grid  and navigate to other cell”. 
 
Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon