Editable grid with no toolbar, databound, ready to go, defaults in edit mode on a default add row, 1st column focused and in edit mode.

I've been playing around trying to accomplish the above, but am having issues and I can't seem to do things programmatically from code behind.

I try to avoid embedded @code and instead use code behind pages.  For ex: TestPage.razor and TestPage.razor.cs.

I would appreciate a sample for the SfGrid that can do the following:
1) When the page opens, the grid is bound to an observablecollection declared in the code behind. it may or may not be empty.
2) A new empty row (grid.AddRecord) is auto added at the bottom and the 1st column of that row is in edit mode and focused.
3) When the user types a value into that 1st cell and hits enter it goes to the next cell to the right (not down) AND a new add row appears below. Somehow codebehind, either a grid event or a notify event in my custom bound object,  I would get the chance to validation their entry and if valid, officially add that row to the current collection, advance focus to the next cell to the right and auto add the next empty row (call AddRecord again) so it's ready for them. When the user finishes on the last cell in that current row of the 1st add row that was auto added, the auto focus moves to the 1st cell of the next row that was auto added above in step 3.  I want the user to be able to just start typing, moving across the record to the right and the next row is auto added and they can just type and not need a mouse or anything else to type in data or create additional new rows.
4) I do not want to display or require the user to have to click an Add, Edit, Update or Delete button.  I would like it all automatic.  
5) Even deletes.  If the user hits escape on a cell edit and now they are using the arrow keys to move around the cells, if they hit the del key, there should be an event so that I can trap that and delete the current row.

Issues I'm running into so far:
A) I have the grid ref and data source declared in code behind.  The grid's ref property does not appear to get populated until the AfterRender events
B) I am calling grid.AddRecord in the AfterRender events and also StateChanged, etc, but I can't get my add row to show up. I added a  dedication button on the screen to add the row, great, that works.  Why can't I get the add row to appear from code behind when the page is initialized?
C) How can I make the enter key on a cell go to the right, not down?
D) Can there be an auto edit on typing?  Is there a way that the 1st character they type auto starts editing instead of F2?

Thank You!


1 Reply

RN Rahul Narayanasamy Syncfusion Team January 7, 2021 06:58 AM UTC

Hi HFirst, 

Greetings from Syncfusion. 

You have created a new incident under your Direct trac account for this requirement with more details. We suggest you to follow up with the incident for further updates. Please log in using the below link.  


Regards, 
Rahul 


Loader.
Up arrow icon