Bug - Tab Key Navigation Fails When Changing Selection Mode

[Shannon]

Hey Team,

I may not completely understand the full effects of selection modes, but I'd like to achieve Copy/Pasting and allow for tab navigation unto the next cell to the right. 

However, I notice that configuring the grid with below:

<GridSelectionSettings CellSelectionMode="CellSelectionMode.Box" Mode="Syncfusion.Blazor.Grids.SelectionMode.Cell" Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>


Achieves copy/pasting of individual or multiple cells, but causes the tab key to stop working as expected (selecting cell to right and begin editing). I have attached an example for reference.  I'd like to achieve both behaviors as required for my project.

Attachment: ServerApp1052558204_3ef82409.zip

[Renjith Singh Rajendran]

Hi Shannon, 

 

Greetings from Syncfusion support. 

 

We suspect that you are referring to the problem of focusing not applied on the Freight column cell when pressing Tab key in SfTextBox rendered in CustomerID column cell.  

 

If so, then we suggest you to render SfNumericTextBox for the Freight column and use the FocusAsync method of SfNumericTextBox inside Created event to apply focus for the corresponding Freight cell. We have prepared a sample based on this requirement, please download and refer the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp-2123123910 

 

Please refer the below highlighted codes, 

 

 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="120"> 

            <EditTemplate> 

                <div @onkeydown="@(e=>KeyDownHandler(e, (context as Order).OrderID,"Freight"))" @onkeydown:preventDefault="true"> 

                    <SfTextBox ID="CustomerID" @bind-Value="(context as Order).CustomerID"></SfTextBox> 

                </div> 

            </EditTemplate> 

        </GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) ...></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"> 

            <EditTemplate> 

                <SfNumericTextBox @ref="GridFreight" TValue="double?" @bind-Value=@((context as Order).Freight)> 

                    <NumericTextBoxEvents Created="Created" TValue="double?"></NumericTextBoxEvents> 

                </SfNumericTextBox> 

            </EditTemplate> 

        </GridColumn> 

 

    SfNumericTextBox<double?> GridFreight; 

    public async void KeyDownHandler(KeyboardEventArgs args, int? OrderID, string leftField) 

    { 

        if (Grid.IsEdit && args.Key == "Tab") 

        { 

            var rowIndex = await Grid.GetRowIndexByPrimaryKeyAsync(OrderID); 

            await Grid.EditCellAsync(rowIndex, leftField); 

        } 

    } 

    public async Task Created() 

    { 

        await GridFreight.FocusAsync();         

    } 

 

 

Reference :  

https://blazor.syncfusion.com/documentation/numeric-textbox/events#created 

https://blazor.syncfusion.com/documentation/datagrid/cell-edit-types#custom-editors-using-templatecell-edit-template 

 

If we have misunderstood your requirement then kindly share with us a video demo showing the detailed explanation of the problem you are facing. 

 

Regards, 

Renjith R 

[Shannon]

Hi Again,

Thanks for the sample. Tried implementing but unfortunately ran into another error - After changing the syncfusion project references, I now have to press tab twice in order to achieve the same functionality.

In ServerApp.csproj - Before:

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
  <PackageReference Include="Syncfusion.Blazor" Version="19.4.0.41" />
  </ItemGroup>
</Project>

After:

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
  <PackageReference Include="Syncfusion.Blazor.Buttons" Version="19.4.0.41" />
  <PackageReference Include="Syncfusion.Blazor.Calendars" Version="19.4.0.41" />
  <PackageReference Include="Syncfusion.Blazor.Cards" Version="19.4.0.41" />
  <PackageReference Include="Syncfusion.Blazor.Charts" Version="19.4.0.41" />
  <PackageReference Include="Syncfusion.Blazor.Core" Version="19.4.0.41" />
  <PackageReference Include="Syncfusion.Blazor.Data" Version="19.4.0.41" />
  <PackageReference Include="Syncfusion.Blazor.DropDowns" Version="19.4.0.41" />
  <PackageReference Include="Syncfusion.Blazor.Grid" Version="19.4.0.41" />
  <PackageReference Include="Syncfusion.Blazor.InPlaceEditor" Version="19.4.0.41" />
  <PackageReference Include="Syncfusion.Blazor.Inputs" Version="19.4.0.41" />
  <PackageReference Include="Syncfusion.Blazor.Lists" Version="19.4.0.41" />
  <PackageReference Include="Syncfusion.Blazor.Navigations" Version="19.4.0.41" />
  <PackageReference Include="Syncfusion.Blazor.Notifications" Version="19.4.0.41" />
  <PackageReference Include="Syncfusion.Blazor.Popups" Version="19.4.0.41" />
  <PackageReference Include="Syncfusion.Blazor.ProgressBar" Version="19.4.0.41" />
  <PackageReference Include="Syncfusion.Blazor.Schedule" Version="19.4.0.41" />
  <PackageReference Include="Syncfusion.Blazor.SplitButtons" Version="19.4.0.41" />
  <PackageReference Include="Syncfusion.Blazor.Themes" Version="19.4.0.41" />
  </ItemGroup>
</Project>

Attachment: ServerApp2123123910_8421f460.zip

[Renjith Singh Rajendran]

Hi Shannon,

We are currently validating the reported problem from our side. We will update you further details within two business days.

Until then we appreciate your patience.

Regards,

Renjith R

[Shannon]

Hi Again, 

After doing more testing I discovered that you can not edit the field when the div has 

@onkeydown:preventDefault="true"

You are unable to type anything into the cell. The user must​ be able to edit data into a cell, then press tab to move to the next cell and begin editing. 

[Renjith Singh Rajendran]

Hi Shannon,

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

[Renjith Singh Rajendran]

Hi Shannon,

We have confirmed this as an issue and logged the defect report “EditCellAsync is not properly editing the cell during tab press when SelectionMode Cell”  for the same. Thank you for taking time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle) and including the fix in our upcoming weekly patch release which is expected to be rolled out by the end of April, 2022.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.        

Feedback : https://www.syncfusion.com/feedback/33923/editcellasync-is-not-properly-editing-the-cell-during-tab-press-when-selectionmode

Regards,

Renjith R

[Shannon]

Hello,

Just following up to ensure this bug fix is still scheduled for this month?

[Renjith Singh Rajendran]

Hi Shannon,

We have resolved the reported problem in our latest versions. So kindly upgrade to our latest version(20.1.0.52) to overcome the reported problem.

NuGet: https://www.nuget.org/packages/Syncfusion.Blazor.Grid

Release Notes : https://blazor.syncfusion.com/documentation/release-notes/20.1.48?type=all#bug-fixes-7

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards,

Renjith R