I'm trying to make it so that when you press enter to confirm an edit, the cell in the row below goes to edit mode. I've tried to get the cell with getCellByColumn (with rowIndex +1). I seem to get the correct cell, but when I do setEditMode(true) nothing changes. Are there any additional things that need to be set or changed?
Hello Jonas,
Thank you for posting to Infragistics Community!
I have been looking into your question and I am wondering which particular IgniteUI for Angular is your project targeting? I am asking because according to our Changelog in GitHub here, as of version 12.1.0, the IgxGridCell class replaces the IgxGridCellComponent class. The setEditMode method is no longer exposed and the IgxGridCell has an editMode property, which can be set to true.
Additionally, I have created this small sample with version 12.1.6 demonstrating how your requirement can be achieved. In the grid-select-sample component template, is declared a cell editor template for the “Race” column and an event handler for the keydown event of the input control is defined. Alternatively, this other sample demonstrates similar logic executed upon the cellEditDone event of the grid. This solution does not require explicitly declaring cell editor templates to which to hook the handler, however it will result in entering the below cell’s edit mode not only on pressing “Enter”, but on the other commit actions as well – they are listed here.
Please, test the suggested samples on your side. If this is not an accurate demonstration of what you are trying to achieve, please feel free to modify any of them and send it back to me along with other details.
Please, keep me posted on your progress.
Sincerely,Bozhidara PachilovaAssociate Software Developer
Thanks for the answer! Sadly, we're still on 12.0.11, so this fix doesn't work. I tried it with the setEditMode mode but this doesn't seem to work at all. I couldn't find any other changes regarding this issue in the 12.1.0 changelog, am I missing something?
Thank you for specifying the IgniteUI version you are using.
The Changelog presents a complete list of changes introduced between versions. If you need further reference for the classes, properties, etc. in between versions, I recommend referring to our API here, where versions can be switched through the drop-down in the black bar above.
In an effort to reproduce your issue, I modified the previous sample to target version 12.0.1. The only change to the custom code is using the setEditMode method. On my side everything works as expected and the edit mode of both the edited and the below cell is correctly applied. Could you please, test the most recent sample on your side and see how it behaves? If the project does show the product feature working correctly, this indicates a possible problem in the code of your application. It will help if you can provide a small, isolated sample application that demonstrates the behavior you are seeing.
Thank you for your cooperation.
Best regards,Bozhidara PachilovaAssociate Software Developer
Hekllo Bozhidara,
Thanks for the help, I got it done now. There's only one thing, when I press enter on a cell I edited and I press tab it goes to the first editable cell of the next row instead of the next cell of the current row. Any idea how we can fizx this?
Best Regards,
Jonas Muilwijk
Thanks. Easy to do!cookie clicker
Hi Jonas,
I am glad that you were able to achieve your requirement about handling the custom “Enter” navigation for an edited cell.
Regarding the behavior you are describing, I have applied those steps in the latest sample for the “Race” column that has the custom “Enter” behavior. Currently, I am not able to reproduce this and "Tab" navigation after navigating to a cell with the custom "Enter" handling works as expected:
I would like to ask you whether this is reproducible in the same sample on your side or is it only local to your project? In case of the latter, could you please fork the sample, modify it with any relevant code, so that the issue is reproduced and send it back to me? This will be highly appreciated so I can investigate the matter further.
Alternatively, as this thread was created a month ago, is it possible that you have upgraded the Ignite UI for Angular version and the suggested approach targeting v 12.0.1 does not work properly anymore?
Finally, you could refer to our Grid Keyboard Navigation documentation topic for additional information regarding navigating between cells in the grid.
Looking forward to hearing from you.
Best regards,Bozhidara PachilovaInfragisics