How to change the Tab key behavior during DataGrid batch editing?

[Syncfusion Support]

Answer:

The behavior of the Tab Key can be altered using EditTemplate feature and EditCell() method of Grid. Using EditTemplate a custom component (SftextBox) has been render inside it, so that the keydown action of the textbox can be intercepted.

On pressing the tab key, when focus is on 2nd column, we have called EditCell() method to edit the 4th column. Here is the code snippet for your reference,

<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315">

<GridEvents OnCellSave="CellSave" TValue="Order">GridEvents>

<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" AllowNextRowEdit="true" Mode="EditMode.Batch">GridEditSettings>

<GridColumns>

<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" ValidationRules="@(new ValidationRules { Required = true })" Type="ColumnType.Number" Width="120">GridColumn>

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

<EditTemplate>

<div>

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

div>

EditTemplate>

GridColumn>

<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" AllowEditing="false" 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">GridColumn>

GridColumns>

SfGrid>

@code{

SfGrid<Order> Grid { get; set; }

public List<Order> Orders { get; set; }

public async void Keydo(KeyboardEventArgs Args)

{

if (Args.Code == "Tab")

{

var selectedIndex = await Grid.GetSelectedRowIndexes(); // get the current edited / selected row index

await Grid.EditCell(selectedIndex[0], Grid.Columns[3].Field); // Edit the 4th column using the row index and column name

}

}

Find the sample change the Tab key behavior during DataGrid batch editing here.

Refer the Cell Edit Template UG documentation to know more.