1. Home
  2. Forum
  3. Blazor
  4. Grid Navigation issue

Grid Navigation issue

I am going to create :enter key navigation" in sfgrid control for fast data entry purpose.for that I have check below link. Its working fine but when I apply empty datasource in grid then enter key navigation is not working. Please check below screencast and advise the same..

https://www.syncfusion.com/forums/164099/how-to-handle-enter-key-navigation-for-tab-index


screencast:

https://www.screencast.com/t/NSzl73fBmTW



5 Replies
RS Renjith Singh Rajendran Syncfusion Team November 23, 2021 01:37 PM UTC

Hi Kins, 
 
Greetings from Syncfusion support. 
 
We have analyzed your shared video, and we would like to inform you that this is the default inbuilt editing behavior in Grid. But default, pressing the Enter key will save the current edited row and move to the next row. We suggest you to refer to the below documentation for more details regarding keyboard navigations in Grid. 
 
We have inbuilt support to navigate the cells using Tab key. So based on your scenario, we suggest you to use the Tab key to perform navigating cells inside Grid’s edit form. 
 
Regards, 
Renjith R 


KI KINS replied to Renjith Singh Rajendran November 23, 2021 03:08 PM UTC

Thanks for support...

Can we save current edited row when I press enter key on last column of current row ??

That means,before adding new row,the edited data should saved in grid datasource (list data source)


Please help in this regards..


RS Renjith Singh Rajendran Syncfusion Team November 24, 2021 12:50 PM UTC

Hi Kins, 
 
Greetings from Syncfusion support. 
 
We suggest you to call the EndEditAsync method of Grid to programmatically save the changes to Grid. Based on your requirement, we suggest you to use EditTemplate for the last editable cell in Grid row and call the EndEditAsync  method when focusing out of the particular component rendered inside EditTemplate.  
 
In the below code, we have used OnBlur event of SfTextBox, which will be triggered when focusing out of SfTextBox. Please refer the codes below, 
 
 
<SfGrid @ref="GridRef" DataSource="@Orders" ...> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings> 
    <GridColumns> 
        ... 
        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="150"> 
              <EditTemplate> 
                <SfTextBox ID="ShipCountry" @bind-Value="@((context as Order).ShipCountry)" OnBlur="OnBlur"></SfTextBox> 
            </EditTemplate> 
        </GridColumn> 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    SfGrid<Order> GridRef; 
    public async Task OnBlur()  
    { 
        await GridRef.EndEditAsync(); 
    } 
 
 
References :  
 
Please get back to us if you need further assistance. 
 
Regards, 
Renjith R 


KI KINS November 30, 2021 04:58 PM UTC

Thanks for help..

Actually "enter key" is key navigation in our erp application.i have set validation rule in second column  but when I press enter key on first column ,the required validation is fired for second column

I Need to prevent required validation when I press enter key


RS Renjith Singh Rajendran Syncfusion Team December 1, 2021 10:02 AM UTC

Hi Kins, 
 
As informed in our previous update, pressing Enter key in an edited cell will trigger save action thereby triggering validation in grid. This is the default behavior of Grid editing. If you need any further assistance, then we need the following details before further proceeding on this scenario, kindly share with us the following details to proceed further. 
 
  1. Share the edit mode you are using.
  2. Share the complete Grid rendering codes or a simple sample reproducing based on your scenario.
  3. Share a detailed explanation of your requirement.
  4. Share with us a video demo showing the replication of the problem or your requirement.
 
The provided information will help us analyze the problem, and provide you a solution as early as possible. 
 
Regards, 
Renjith R 


Loader.
Up arrow icon