How to skip a column using tab key.. Can we setfocus to next column entry via Tab.,

[Tyrone]

Hi team

I need help for the following..

1) How do I skip a column using tab key?..

2) Can we set focus on next column entry via Tab without double clicking it?

btw, I'm applying Batch mode.

Warm regards,

Tyrone

[Renjith Singh Rajendran]

Hi Tyrone, 

Greetings from Syncfusion support. 

We suggest you to bind @onkeydown event for the corresponding edit cell component. Now based on the key as tab call the EditCellAsync method of grid to edit the corresponding column. We have also prepared a sample based on this scenario, pleas download the sample from the link below, 

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

References : https://blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-template 

Please refer the codes below. In the below code, when tab key is pressed in the CustomerID column, it will skip the OrderDate column and focus/edit the Freight column.  

 

<GridColumns>    <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ...></GridColumn>    <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ...>        <EditTemplate>            <SfTextBox ID="CustomerID" @bind-Value="(context as Order).CustomerID"                        @onkeydown="@(e=>KeyDownHandler(e, (context as Order).OrderID,"Freight"))">            </SfTextBox>        </EditTemplate>    </GridColumn>    <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" AllowEditing="false" ... Type="ColumnType.Date"></GridColumn>    <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" ...></GridColumn></GridColumns>

 

 

SfGrid<Order> Grid; 

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); 

    } 

} 

Please get back to us if you need further assistance. 

Regards, 

Renjith R 

[Tyrone]

Thanks Renjith for the immidiate reply.

My problem is Grid.GetRowIndexByPrimaryKeyAsync(OrderID); will not work with newly added lineitem since my ID is autogenerated from EFCore after saving in database.

Is there is an alternative to get the current RowIndex?..

Warm Regards,

Tyrone

[Renjith Singh Rajendran]

Hi Tyrone, 

We suggest you to GetSelectedRowIndexesAsync method to get the current row index. Please refer and use as like the codes below, 

public async void KeyDownHandler(KeyboardEventArgs args, int? OrderID, string leftField){    if (Grid.IsEdit && args.Key == "Tab")    {        var rowIndex = await Grid.GetSelectedRowIndexesAsync();        await Grid.EditCellAsync(rowIndex.FirstOrDefault(), leftField);    }}

Please get back to us if you need further assistance. 

Regards, 

Renjith R 

[Tyrone]

Hi Renjit,

The solution work with text box but not in combobox.

I could have missed something here?

it doesn't fire in the code block. 

        <GridForeignColumn Field=@nameof(SODetailEdit.ItemID)

                           EditType="EditType.DefaultEdit"

                           HeaderText="Item"

                           ForeignKeyField="ItemID"

                           ForeignKeyValue="ItemDescription"

                           ForeignDataSource="@Items"

                           Width="300">

            <EditTemplate>

                <SfComboBox @ref="ComboBoxItem"

                            ID="ItemID" TItem="Item"

                            TValue="int"

                            AllowCustom="false"

                            Autofill="true"

                            Placeholder=" Select Product"

                            CssClass="e-multi-column"

                            AllowFiltering="true"

                            PopupHeight="300px"

                            Width="300"

                            DataSource="@Items"

                            @bind-Value="@((context as SODetailEdit).ItemID)"

                            @onkeydown="@(e=>KeyDownHandlerItem(e, "Quantity"))">  //

                    <ComboBoxTemplates TItem="Item">

                        <HeaderTemplate>

                            <table>

                                <tr>

                                    <th class="e-text-center combo-width">Code</th>

                                    <th>Name</th>

                                    <th>Description</th>

                                    <th>Price</th>

                                    <th>Price</th>

                                    <th>Price</th>

                                    <th>id</th>

                                </tr>

                            </table>

                        </HeaderTemplate>

                        <ItemTemplate Context="ComboContext">

                            <table>

                                <tbody>

                                    <tr>

                                        <td class="e-text-center combo-width">@((ComboContext as Item).ItemCode)</td>

                                        <td>@((ComboContext as Item).ItemDescription)</td>

                                        <td>@((ComboContext as Item).Price)</td>

                                        <td>@((ComboContext as Item).ItemID)</td>

                                    </tr>

                                </tbody>

                            </table>

                        </ItemTemplate>

                    </ComboBoxTemplates>

                    <ComboBoxFieldSettings Value="ItemID" Text="ItemDescription"></ComboBoxFieldSettings>

                    <ComboBoxEvents TItem="Item" TValue="int" Created="Created" ValueChange="OnValueChangeItem"></ComboBoxEvents>

                </SfComboBox>

            </EditTemplate>

        </GridForeignColumn>

[Renjith Singh Rajendran]

Hi Tyrone, 

When using SfComboBox, we suggest you to bind @onkeydown event to the parent div element of combobox as like the code below, 

 

<EditTemplate> 

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

        <SfComboBox ID="CustomerID" TItem="Order" ...> 

             ... 

        </SfComboBox> 

    </div> 

</EditTemplate> 

Please get back to us if you need further assistance. 

Regards, 

Renjith R 

[Tyrone]

 Thanks Renjit. it worked

[Renjith Singh Rajendran]

Hi Tyrone, 

Thanks for your update. Please get back to us if you need further assistance. 

Regards, 

Renjith R