How to customize navigation through the grid using Enter key

[Sahal]

 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]

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. 

Sample:  https://stackblitz.com/edit/angular-3prvk7?file=batch-editing.html  

Refer the help documentation. 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#setcellvalue 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#cellsave 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#addeventlistener 

Regards, 

Thavasianand S. 

[Sahal]

Superb! Works great

Thank you Thavasianand 

[Thavasianand Sankaranarayanan]

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]

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]

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. 

Sample : https://stackblitz.com/edit/angular-3prvk7-5qacxb?file=batch-editing.component.ts  

Video : http://www.syncfusion.com/downloads/support/directtrac/general/ze/focus_newrow-1602020096  

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]

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]

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); 

    } 

 

}) 

} 

Sample : https://stackblitz.com/edit/angular-3prvk7-bxpqxh?file=batch-editing.component.ts  

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

Demo sample : https://ej2.syncfusion.com/angular/demos/#/material/grid/normal-edit  

Help documentation : https://ej2.syncfusion.com/angular/documentation/api/grid/newRowPosition/  

Regards, 

Thavasianand S. 

[Sahal]

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]

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); 

      } 

    }) 

  } 

Sample : https://stackblitz.com/edit/angular-3prvk7-2nxi6s?file=batch-editing.html  

Regards, 

Thavasianand S. 

[Sahal]

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]

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 

Sample : https://stackblitz.com/edit/angular-3prvk7-38q5gj?file=batch-editing.component.ts  

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. 

Help documentation:  https://ej2.syncfusion.com/angular/documentation/api/grid/#addrecord  

https://ej2.syncfusion.com/angular/documentation/api/grid/#startedit  

https://ej2.syncfusion.com/angular/documentation/api/grid/#endedit  

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

Regards, 

Thavasianand S. 

[Sahal]

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

https://stackblitz.com/edit/angular-3prvk7-ffpnl2?file=batch-editing.component.ts

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]

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. 

Sample : https://stackblitz.com/edit/angular-mtisdt-rvtwew?file=normal-edit.html  

Regards, 

Thavasianand S. 

[Sahal]

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]

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)) 

  } 

 

} 

 

 

Sample link: https://stackblitz.com/edit/angular-3prvk7-kqe5jr?file=batch-editing.component.ts  

 

Please get back to us if you need further assistance. 

 

Regards, 

Thavasianand S. 

[Sahal]

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]

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'); 

        }... 

Sample: https://stackblitz.com/edit/angular-3prvk7-iatjaf?file=batch-editing.component.ts  

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]

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]

Hi Sahal, 

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

Until then we apricate your patience. 

Regards, 

Thavasianand S. 

[Thavasianand Sankaranarayanan]

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.