Guided navigation within a DataGrid

Radzen Studio Blazor WebAssembly
1

I have a grid with several editable columns. The editable columns are in Editable mode from top to bottom. I would like to set one of those columns so that when data is entered into a row and the Enter button is pressed, focus jumps to the same field next row down, so that one could fill in the entire column without utilizing the Tab key or the mouse, just type, enter, type, enter, etc. Can someone steer me to which features I would need to use to accomplish this?

As a related question, which likely overlaps in features employed, I have another column where when a value is entered, I wish to propagate the value to the same column in the succeeding rows. I suspect that this would start from the same point in the code.

2

Hi @bmccord,

You can check my reply in this thread: Radzen Textbox with multi string chips - #2 by korchev.

You would need something similar - to handle the keydown event and perform custom implementation such as finding and focusing the next editable element.

3

I checked the thread, and that would do nicely if I had a single textbox in a form, but as it's a textbox in a grid column, there are multiple textboxes with the same id or ref. This is the column in the grid:

<RadzenDataGridColumn TItem="GiftCardOrder" Property="GiftCardID" Title="Gift Card Barcode" Width="145px">
	<EditTemplate Context="order">
		<RadzenTextBox Name="ID" @bind-Value="@(order.GiftCardID)" @ref="GCID" Style="width:100%; display: block" Change="@(args => OnIDChange(orders.IndexOf(order)))" @onkeydown="(args => OnOrderGridKeyDown(args, orders.IndexOf(order)))" />
		<RadzenCustomValidator Component="ID" Validator="@(() => ValidateGiftCardID(order.GiftCardID))" Text="Not a valid ID" Popup=@popup />
	</EditTemplate>
</RadzenDataGridColumn>

and this is the code that handles the keydown:

    private void OnOrderGridKeyDown(KeyboardEventArgs e, int index)
    {
        if (e.Code == "Enter")
        {
            if (index != orders.Count - 1)
            {
                ogrid.SelectRow(orders[index + 1]);
                GCID.Element.FocusAsync();
            }
        }
    }  // OnOrderGridKeyDown

I'm attempting to position myself on the desired row, then focus on the desired textbox on that row, but what happens instead is that the textbox in the bottom row gets the focus, presumably because that was the last one rendered. I tried delaying this and handling it in OnAfterRenderAsync, but it didn't make any difference.

So my problem is getting it to focus in the correct row.