1. Home
  2. Forum
  3. Blazor
  4. With SelectionMode.Row configured, Tab key does not move to next row

With SelectionMode.Row configured, Tab key does not move to next row

Hello,


When GridSelectionSettings.Mode = SelectionMode.Batch and AllowEditing=true and you press the Tab key in the last cell in a row and that cell value is valid, then focus moves to the first cell in the next row.


However, when GridSelectionSettings.Mode = SelectionMode.Batch and you press the Tab key in the last cell in a row, the focus moves to the next tab stop control on the form rather than the next row.


How, can I get the grid to move focus to the next row (if one exists) rather than the next tab stop when SectionMode.Row is configured?


Thanks,


Chuck



9 Replies
RS Renjith Singh Rajendran Syncfusion Team March 21, 2022 11:44 AM UTC

Hi Chuck, 
 
Greetings from Syncfusion support. 
 
We are not clear about the exact scenario or problem you are facing. We need the following details to further proceed on this scenario. Kindly get back to us with the following details for better assistance. 
 
  1. Share a video demo showing the replication of the problem you are facing.
  2. Share the complete Grid rendering codes.
  3. If possible share a simple issue reproducing sample for us to validate.
 
The provided information will help us analyze the problem, and provide you a solution as early as possible. 
 
Also we suggest you to refer to the below documentation for continue editing next/previous rows with Batch mode of editing. 
 
Regards, 
Renjith R 


CR Chuck Richardson March 21, 2022 04:38 PM UTC

Hi Renjith,


Thank you for the quick reply and my apologies, I had a typo in my case above and wasn't entirely clear. My example should have said GredEditSettings.Mode = SelectionMode.Batch for the first and SelectionMode.Batch.Row for the second.


In any case, here are the exact repro steps. For the case where the grid behaves as expected, use your batch editing example Blazor DataGrid Batch Editing Example - Syncfusion Demos

  1. Click in the first row to select it.
  2. Press F2 to edit
  3. Press the tab key until you get to the Ship Country column
  4. Press the tab key once more
Result: As expected the cell focus is moved to the second row.

However, if you use your Inline Editing example Blazor DataGrid Inline Editing Example - Syncfusion Demo
  1. Click in the first row to select it.
  2. Press F2 to edit
  3. Press the tab key until you get to the Ship Country column
  4. Press the tab key once more
Result: in this case the focus jumps to the GridEditSettings hyperlink outside of the grid component which presumably is the next tab stop



I would expect that the row should have been saved and the focus should be moved to the next row.


Thanks,


Chuck


RS Renjith Singh Rajendran Syncfusion Team March 22, 2022 11:53 AM UTC

Hi Chuck, 
 
Thanks for sharing the details. 
 
We would like to inform you that, by default we have keyboard navigation support to save a editable row and move to next row by using the Enter key when having inline editing. So based on this scenario, we suggest you to use the Enter key to save the current edited row and move to the next row. Using tab key will navigate only between the cells of the row, this is default behavior. We suggest you to refer to the below documentation for the available inbuilt keyboard navigation support in grid. 
 
Please get back to us if you need further assistance. 
 
Regards, 
Renjith R 


CR Chuck Richardson March 22, 2022 04:29 PM UTC

Hi Renjith,


Thank you for your reply. However, the behaviour in is inconsistent and provides for a confusing user experience.

With EditMode.Batch, tabbing from the last cell saves that cell and moves the focus to the first cell of the next row in the grid.


Whereas with EditMode.Normal, tabbing from the last cell navigates away from the grid component altogether.


At a minimum I would expect the tab key to wrap around to the first cell in the edited row so that the user can continue tabbing around the row until they press Enter or click Save.


Is there a way I can achieve this by customising the grid behaviour?


Thanks,


Chuck



RS Renjith Singh Rajendran Syncfusion Team March 23, 2022 10:23 AM UTC

Hi Chuck, 
 
Query : I would expect the tab key to wrap around to the first cell in the edited row 
Based on this scenario, we suggest you to use EditTemplate for the first and last editable cells of the particular row. Now you can customize the Tab key action performed on the last cell to focus the first editable cell in the row. We have prepared a sample based on this requirement, please download and refer the sample from the link below, 
 
Please refer the codes below, 
 
 
<SfGrid @ref="GridInstance" DataSource="@Orders" ...> 
    ... 
   <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ... Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="120"> 
            <EditTemplate> 
                <SfTextBox @ref="CustomerIDTextBox" ID="CustomerID" Placeholder="CustomerID Value" @bind-Value="@((context as Order).CustomerID)"></SfTextBox> 
            </EditTemplate> 
        </GridColumn> 
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn> 
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"> 
            <EditTemplate> 
                <div @onkeydown="@KeyDownHandler" @onkeydown:preventDefault="true"> 
                    <SfDropDownList ID="ShipCountry" TItem="Order" TValue="string" @bind-Value="@((context as Order).ShipCountry)" DataSource="@Orders"> 
                        <DropDownListFieldSettings Value="ShipCountry" Text="ShipCountry"></DropDownListFieldSettings> 
                    </SfDropDownList> 
                </div> 
            </EditTemplate> 
        </GridColumn> 
    </GridColumns> 
</SfGrid> 
 
    SfGrid<Order> GridInstance; 
    SfTextBox CustomerIDTextBox; 
    public async void KeyDownHandler(KeyboardEventArgs args) 
    { 
        if(args.Key == "Tab") 
       { 
            //apply focusing for the first cell when tab out of last editable cell 
            await CustomerIDTextBox.FocusAsync(); 
        } 
    } 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Renjith R 


CR Chuck Richardson March 31, 2022 02:18 PM UTC

Hi Renjith,


Thank you for the solution above. This is working well. However, upon testing this approach we have concluded it would be more intuitive if, upon pressing Tab in the last column, that the row would be saved (via EndEditAsync) and focus moved to the first column of the next row.


Using your example code, I have tried to achieve this by modifying the KeyDownHandler as follows:


    public async void KeyDownHandler(KeyboardEventArgs args)

    {

        if(args.Key == "Tab")

        {

            //apply focusing for the first cell when tab out of last editable cell

            await DemoGrid.CloseEditAsync();

            await DemoGrid.SelectRowAsync(3); //Testing setting focus to row 3 for now. If we can get this to work we'll need to dynamically determine the correct row number to select

            await DemoGrid.FocusAsync();

        }

    }


This visually appears to select row 3 as it is highlighted and focus is set to the grid as expected. However, upon pressing Tab the focus cell and row jump to the first row in the grid.


How can I programmatically set the correct row and cell in  KeyDownHandler so that when the user next presses tab they remain in the correct row?


Thanks,


Chuck




RS Renjith Singh Rajendran Syncfusion Team April 1, 2022 02:48 PM UTC

Hi Chuck,


We are checking the reported scenario from our side. We will update you further details within two business days.


Until then we appreciate your patience.


Regards,

Renjith R



RS Renjith Singh Rajendran Syncfusion Team April 4, 2022 10:27 AM UTC

Hi Chuck,


We could achieve this requirement by selecting a row based on index using SelectRowAsync method and calling the StartEditAsync method. But currently, we are facing difficulties in applying this solution. Currently, the last focused row is getting edited when calling the method, irrespective of the row selected in grid.


We have considered this a defect and this has been fixed internally, the fix is expected to be rolled out by the mid of April 2022. We will update you the suggestion for this requirement once the release is rolled out. Until then we appreciate your patience.


Regards,

Renjith R


RS Renjith Singh Rajendran Syncfusion Team April 18, 2022 11:11 AM UTC

Hi Chuck,


We have prepared a sample based on this requirement by using the suggestion from our previous update. Please download and refer the sample attached in this ticket.


We have used EditTemplate for the last column and bind @onkeydown event. In this @onkeydown event we have programmatically perform save action by calling EndEditAsync method. Now in OnActionComplete event handler we have fetched the row index and selected the corresponding row using SelectRowAsync method and based on selected index, we have called StartEditAsync to perform start edit action on the selected row. Please refer the codes below,


 

<GridEvents OnActionComplete="OnActionComplete" RowSelected="RowSelected" TValue="Order"></GridEvents>

 

@*Use EditTemplate for last column*@

        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150">

              <EditTemplate>

                <div @onkeydown="@KeyDownHandler" @onkeydown:preventDefault="true">

                    <SfDropDownList ID="ShipCountry" TItem="Order" TValue="string" @bind-Value="@((context as Order).ShipCountry)" DataSource="@Orders">

                        <DropDownListFieldSettings Value="ShipCountry" Text="ShipCountry"></DropDownListFieldSettings>

                    </SfDropDownList>

                </div>

            </EditTemplate>

        </GridColumn>

 

    public double RowIndex { get; set; }

    public async void KeyDownHandler(KeyboardEventArgs args)

    {

        if(args.Key == "Tab")

        {

            //call the EndEditAsync when tab the last cell

            await GridInstance.EndEditAsync();

        }

    }

    public bool flag = false;

    public async Task OnActionComplete(ActionEventArgs<Order> args)

    {

        if (args.RequestType.Equals(Action.Save))

        {

            //Get rowindex of current cell based on RequestType as save and increment by 1

            flag = true;

            RowIndex = await GridInstance.GetRowIndexByPrimaryKeyAsync(args.Data.OrderID) + 1;

        }

    }

    public async Task RowSelected(RowSelectEventArgs<Order> args)

    {

        if (flag)

        {

            //select row based on calculated index

            flag = false;

            await GridInstance.SelectRowAsync(RowIndex);

        }

        if(args.RowIndex == RowIndex)

        {

            //edit the selected row

            await GridInstance.StartEditAsync();

        }

    }

 


Please get back to us if you need further assistance.


Regards,

Renjith R


Attachment: ServerApp_92e5dfd7.zip

Loader.
Up arrow icon