Data Grid have no Cell Edit Mode

Question

Hi! I was wonder why the Data Grid has no Cell edit mode like Tree Grid.

I'm replacing a tree grid for a data grid and I have no way to enable edit mode, my use case needs that everytime a cell is edit I need to fire events.

Thanks

Vignesh Sivagnanam · Accepted Answer

Hi Cesar 

Sorry for the late reply 

Query: “I was wonder why the Data Grid has no Cell edit mode like Tree Grid” 

By default in EJ2 TreeGrid the dataSource structure will be in the parent-child relationship. In TreeGrid Component for the parent record most of the columns will not have data except the childMapping property, so when we edit the record most of the columns have empty data.  

To avoid this behavior, we have provided the default edit mode as cell for the treegrid. But in EJ2 Grid most of the columns have data so we have provided the row editing in the Grid. But to achieve your requirement in EJ2 DataGrid we have prepared the workaround solution and in workaround solution we have used batch editing. 

So, please refer the below sample for your reference. 

Sample : https://stackblitz.com/edit/angular-5dwgme?file=app.component.ts 

Code Example: 




<ejs-grid #grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' (keyPressed)="keyPressed($event)" allowPaging='true'  
 (cellSave)='celsave($event)' (cellSaved)='celsaved($event)' > 
. 
. 
 public isKeyPressed = false; 
    public isCellSave = false; 
    ngOnInit(): void { 
        this.data = data; 
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' }; 
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 
    } 
    celsave(args){ 
      this.grid.editSettings.showConfirmDialog=false; 
      this.grid.editModule.batchSave(); 
      this.isCellSave = true; 

    } 
    keyPressed(args) { 
    this.isKeyPressed = (args.key == "Enter"); 
  } 
  celsaved(args){ 
    debugger 
    if(this.isKeyPressed && this.isCellSave){ 
      this.grid.editModule.batchSave(); 
        args.cancel = true; 
      } 
      else{ 
        this.isKeyPressed = false; 
      } 
  } 


Query 2: my use case needs that everytime a cell is edit I need to fire events.  
 
To achieve your requirement, we suggest that you use our cellEdit event which will be triggered when the cell is being edited. 
 
Please refer the Documentation for your reference 
 
Documentation : https://ej2.syncfusion.com/angular/documentation/api/grid/#celledit 
 
Please get back to us. If you need any further assistance. 

Regards, 
Vignesh Sivagnanam

Cesar Smerling · Answer

Ok I manage to enable edit mode for a Cell with the Batch Mode mentioned before.

Now I'm having problems with the keyboard cell selection and the edit mode.

What I want to achieve is that navigates the user can navigate with the keyboard (arrows and tab, shift+tab) and enter and leaves edit mode with Enter.

It's seems that Tab and Enter moves the selection and enables edit mode. I want to avoid the enable edit mode with TAB and avoid navigation with the ENTER. So the user can navigate with TAB and ARROWS and edit only with Enter. Inside edit mode with ESCAPE cancel navigation and ENTER save the cell but cannot navigate.

I have another thing that you have to keep in mind, every time I edit a cell the rows are refresehed completed, so also I need to re select the cell that was selected before.

Thanks

Praveenkumar Gajendiran · Answer

Hi Cesar, 

Thanks for your update. 
 
Before proceeding with your requirement, we need the following details to understand the query better at our end. So kindly share the following details.  


By default in batch edit mode, when pressing tab key the targeted cell will moved to cell editable state as demonstrated in the below video. So please confirm you want to prevent this default behavior?Video: https://www.syncfusion.com/downloads/support/forum/157807/ze/AN6D98~1599886753.zip
And you need to move the selected cell to editable state only when pressing the Enter key ?
If this is not your requirement, please elaborate your exact requirement.
If possible, explain your requirement with video demonstration.

Please get back to us with the requested details. 

Regards 
Praveenkumar G

Cesar Smerling · Answer

Hi!Q1. By default in batch edit mode, when pressing tab key the targeted cell will moved to cell editable state as demonstrated in the below video. So please confirm you want to prevent this default behavior?Yes, I want to prevent the TAB and SHIFT+TAB to enter edit mode, will be like ARROWSQ2. And you need to move the selected cell to editable state only when pressing the Enter key ?Yes, with Enter or Space will enable edit mode. Also leave edit Mode with ENTER (or ESC), and avoid move the cell down like ENTER does (mentioned in documentation)Thanks!

Cesar Smerling · Answer

Hi, requeriments of the user change.We need now that with Tab, Shift+Tab, Enter, Enter+Tab enters edit mode in the cells that are editable.Remember that I have the Batch Mode work around to get the grid edit working as a cell edition.In our grid, when the user edit a value a API is called and the rows are refreshed, so a "refresh" is called in the grid. I manage to get working the navigation with tabs, enters and arrows when no edition is made (not firing api call)But when the api is call and all the rows change I tried to select the corresponding cell and enter edit mode and the edit mode freezes.Note: My data source is a array on objects, the api gets call and the array is build again (not using Data Manager).Attached a video to show the behavior.Attachment: SVM_Angular__Google_Chrome_19_11_2020_10_45_11_aeda6f97.zip

Cesar Smerling · Answer

Hello!I got tired of get problems with the Grids in general.How a grid doesn't have Cell Edition, every grid in the world have it.Refresh rows and update any row (or cell) without affecting others, any grid must have it.Keyboard navigations and enter, leaving edition mode and a simple way to deactive all this behavior is needed in all third party components.I want to know if this things will me solved soon. Our company pay 3 years of this we are starting our projects, we cannot get this problems, we are delaying too much trying to find workaround for everything.And I would like to have anwser fasts, any time I ask a question I have to send code, screenshots, videos. I most of the time I do, and you need more info to see what is going on

Ajith Govarthan · Answer

Hi Cesar, 
 
Thanks for the update and sorry for the delayed response. 
 
Query: We need now that with Tab, Shift+Tab, Enter, Enter+Tab enters edit mode in the cells that are editable.Remember that I have the Batch Mode work around to get the grid edit working as a cell edition. 
 
Based on your query we suspect that you want to enter edit mode when press the keys like enter, enter +Tab, Tab and shift+Tab. So, we have prepared sample and in this sample we have  prevented the default functionalities of the keys using the keyConfigs property of the keyboard module and using the keydown event we have edited the selected cell by calling the editCell method. 
 
For your convenience we have attached the sample so please refer the sample for your reference. 
 
 
Code Example: 




App.component.ts 
 
dataBound(args) { 
    if (this.flag) { 
      this.grid.keyboardModule.keyConfigs["enter"] = ""; 
      this.grid.keyboardModule.keyConfigs["tab"] = ""; 
      this.grid.keyboardModule.keyConfigs["shiftTab"] = ""; 
      this.flag = false;                          //            similarly you can handle the same for enter+tab key 
    } 
  } 
 
  public keyHandler(e) { 
    if ( 
      (e.keyCode === 13 || 
        e.keyCode === 9 || 
        (e.keyCode === 16 && e.key === "Shift")) && 
      e.target.classList.contains("e-rowcell") 
    ) { 
      let rowInfo = this.grid.getRowInfo(e.target); 
      this.grid.editCell(rowInfo.rowIndex, (rowInfo.column as any).field); 
    } 
  } 
} 
 
Sample Link: https://stackblitz.com/edit/angular-248792-disable-keyaction-j55yc7?file=app.component.ts 
 
If you still face the issue, we will setup a web meeting to look on to the problem by creating incident for the reported issue. Please let us know your availability for web Meeting and based on that we can schedule a web meeting with you to look into the reported problem in your machine. 
 
Regards, 
Ajith G.

Cesar Smerling · Answer

Hi!

I managed to get around with the edition with the keyboard, but still I'm facing a problem.

1. In my edit mode, my cell edition could be a TextBox or a ComboBox, in any case entering edit mode and pressing up or down then hitting Esc the grid loses the focus (i thing) but the edit mode is still enabled. But if not Up or Down is pressing inside the TextBox or ComboBox the Esc leaves edit mode and works fine. There is a work around to solve this?

I shared my code in the attached and a video to show an example (you could see in the video that I'm hitting up and down the cursor moves in the TextBox)

2. Another thing I want to cancel the edition (restore previous value) on hitting Esc (canceling the edition mode)

Attachment: dataGrid_41ce34dd.7z

Ajith Govarthan · Answer

Hi Cesar,  
  
Thanks for the update. 
 
Query: But on moving with arrows up, down the behavior sometimes get weird. I show a video with that behavior. 
 
Based on your attached video demonstration we have prepared sample, but we did not face any issue in the prepared sample. So, for your convenience we have attached the sample and please refer the sample for your reference.  
 
Query: I want to cancel the edition (restore previous value) on hitting Esc (canceling the edition mode) and need to maintain the focus on hitting the up and downkey. 
 
Based on your query you want to maintain the focus on hitting the up ,down and esc key with edit mode and also need to cancel the editing on hitting the Esc key. So, we have prepared sample using keydown event and in this event, we have cancelled the editing by calling the closeEdit method. 
 
For your convenience we have attached the sample so please refer the sample for your reference. 
 
Code Example: 




App.component.ts 
 
dataBound(args) { 
    if (this.flag) { 
      this.grid.keyboardModule.keyConfigs["enter"] = ""; 
      this.grid.keyboardModule.keyConfigs["tab"] = ""; 
      this.grid.keyboardModule.keyConfigs["shiftTab"] = ""; 
      this.grid.keyboardModule.keyConfigs["escape"] = "";  // remove the default behavior for escape 
      this.flag = false; 
    } 
  } 
 
  public keyHandler(e) { 
    if ( 
      (e.keyCode === 13 || 
        e.keyCode === 9 || 
        (e.keyCode === 16 && e.key === "Shift")) && 
      e.target.classList.contains("e-rowcell") 
    ) { 
      let rowInfo = this.grid.getRowInfo(e.target); 
      this.grid.editCell(rowInfo.rowIndex, (rowInfo.column as any).field); 
    } 
    if (e.keyCode === 27 && e.key === "Escape" && this.grid.isEdit) { 
      this.grid.closeEdit();   // cancel the editing. 
    }  
  } 
 
Sample Link: https://stackblitz.com/edit/angular-248792-disable-keyaction-gpm12z?file=app.component.ts 
 
UG-Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#closeedit 
 
Please get back to us if you need further assistance. 
 
Regards, 
Ajith G.

Cesar Smerling · Answer

HiQuery: But on moving with arrows up, down the behavior sometimes get weird. I show a video with that behavior.  Based on your attached video demonstration we have prepared sample, but we did not face any issue in the prepared sample. So, for your convenience we have attached the sample and please refer the sample for your reference. If you go to the example link, in colum Freight enter edit mode, press up or down and then Escape the wrong behavior appears.Please check it again in your example.

Cesar Smerling · Answer

Hi!Also the help of cancel with escape doesn't work, the (cellSave) and (cellSaved) method is called and with the new value, not the previous one.For the key Up and Down problem, could be disabling the up/down arrow for the TextBox and ComboBox. Because if you enter edit mode and press escape it disable edito mode, but if you go enter edit mode, press up and the escape the cell edit lose focus, and I think the grid too.

Ajith Govarthan · Answer

Hi Cesar, 
 
Thanks for the update. 
 
Query: If you go to the example link, in colum Freight enter edit mode, press up or down and then Escape the wrong behavior appears.  
 
Based on your query we have checked the sample and did not faced any issue in the freight column. In the freight column we have used the editType as numericedit so which will render NumericTextBox component and in the NumericTextbox the up and down arrow will increase and decrease the values which is the default behavior of the NumericTextbox component. 
 
For your convenience we have attached the video demonstration for Freight column so please refer the video demo for your reference. 
 
Video demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/UNTITL~2-1741188222.zip 
 
Sample Link: https://stackblitz.com/edit/angular-248792-disable-keyaction-eqqlkd?file=app.component.ts 
 
If you still face the issue, then please share the video demonstration of the reported issue with our stackblitz sample. 
 
Regards, 
Ajith G.

Cesar Smerling · Answer

Hi!I attached a video that is happening the example.In the video when I edit the first time I press only Escape the Cell Edit mode is closed.The second time I press up a few times and then press Escape, the cell Edit mode it's seems closed but the numeric text box is still selected.I think is something about the grid focus on Escape and Space (that scrolls down) but I don't know how to change this behavior.ThanksAttachment: Window__Google_Chrome_20201217_151928_a911b69.7z

Ajith Govarthan · Answer

Hi Cesar,  
  
Thanks for the update. 

Query: In the video when I edit the first time I press only Escape the Cell Edit mode is closed.The second time I press up a few times and then press Escape, the cell Edit mode it's seems closed but the numeric text box is still selected. 
 
For this query, we have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.   
  
https://www.syncfusion.com/account/login 

Regards, 
Ajith G.

Francois Zbinden · Answer

Syncfusion has a very good component palette with many features. But in this important aspect, ejs grid is way behind competitors.

Please check how easy is it so modify cell values in as grid: https://www.ag-grid.com/example/. I've attached a small video.

You can move around in cells with arrow keys and immediately enter values. And safe using Enter. It's fast, intuitive and comfortable.

It would be very nice if ejs grid had a simmilar mode without "hacks"

Attachment: 20241211_09h46_46_2677dc36.zip

Dineshnarasimman Muthu · Answer

Hi
,In
the EJ2 Syncfusion Grid, the Batch Editing mode provides functionality similar
to what is demonstrated in the video you shared. This mode allows users to
perform editing actions directly using the keyboard for an efficient and
seamless experience.Sample:
https://stackblitz.com/edit/angular-xeakce8z?file=src%2Fapp.component.html
In
this sample, the grid is configured with columns that replicate the structure
shown in the video. Below are the key keyboard shortcuts for editing and
navigating cells in the grid:              
• F2 Key: Press F2 to enter edit mode for the currently focused cell.              
• Tab Key: Use the Tab key to move to and edit the next cell in the row.              
• Shift + Tab Key: Use Shift + Tab to move to and edit the previous cell
in the row.              
• Alt + Down Arrow: Press Alt + Down Arrow while in edit mode to open
popups such as dropdown lists or date pickers.              
• Escape Key: Press Escape to exit edit mode for the current cell.              
• Enter Key: Use the Enter key to navigate to and edit cells in the row
belowWe
have attached a video demonstrating the Batch Editing feature with full
keyboard accessibility for reference.Video:
 For
further details, we have attached the documentation on Keyboard Accessibility,
which provides a comprehensive list of actions and their corresponding keys. We
have also attached the Batch Editing documentation for your reference.Key
Board Accessibility: https://helpej2.syncfusion.com/angular/documentation/grid/accessibility#keyboard-interaction
Batch
Editing: https://helpej2.syncfusion.com/angular/documentation/grid/editing/batch-editing
If
you have any further queries regarding this please get back to us.Regards,Dineshnarasimman
M

Francois Zbinden · Answer

Hello Dineshnarasimman

I'm aware of batch editing. But it's not exactly what I'm wishing of. I still require the user to enter a row, start editing and then commit using "Update".

This sample is more the user experience we prefer:

https://helpej2.syncfusion.com/angular/documentation/grid/editing/batch-editing?_gl=1*e3a01x*_gcl_au*MTg3OTQ3ODg3Ny4xNzMzOTA3ODg0*_ga*MTMyMzEyNDQ3OS4xNzE1MTc1MjMz*_ga_41J4HFMX1J*MTczNDM2NDQ0Mi4xMTIuMS4xNzM0MzY0NDYzLjAuMC4w#how-to-make-editing-in-single-click-and-arrow-keys

But this still is only included in batch mode. So it comes with "green cells" and the need of hit the "update" Button.

Also, I think a cell edit mode should be included in the grid without writing additional code like in the sample above.

Thanks for considering our request

Francois

Dineshnarasimman Muthu · Answer

Hi,We
understand your requirement regarding the single click edit in the batch edit
mode. Currently we do not have support for this requirement, however we have
considered this as feature request from our end "Feature on single
click editing in batch editing" and added it to our feature request
database. At the planning stage for every release cycle, we review all
open features and identify features for implementation based on specific
parameters including product vision, technical feasibility, and customer interest.
And this feature will be included in any of our upcoming releases.You
can now track the status of your request, review the proposed resolution
timeline, and contact us for any further inquiries through this link.Feedback
link:  https://www.syncfusion.com/feedback/64275/feature-on-single-click-editing-in-batch-editingWe
are closing this ticket for now. You can communicate with us regarding the open
features at any time using the above Feature Report page.Regards,Dineshnarasimman
M