Как установить фокус на новое поле ввода внутри строки таблицы данных?

Я работаю с DevExpress DataGrids и изо всех сил пытаюсь сфокусировать новый ввод внутри динамически сгенерированной строки. Практически у меня есть сетка, которая изначально состоит из одной строки, состоящей из поля ввода html и других столбцов. Я использую ObservableCollections в качестве источника данных datagrid, потому что проще обновлять сетку каждый раз, когда я изменяю коллекцию.
Всякий раз, когда я вставляю новое значение во ввод и нажимаю Enter, чтобы вызвать событие onchange Blazor, я хочу добавить новую строку и сфокусировать новый ввод внутри последней добавленной строки.

Это моя декларация Datagrid в тестовом проекте:

      <DxDataGrid ColumnResizeMode="DataGridColumnResizeMode.NextColumn"
            CssClass="table table-striped"
            Data=@itemsOnTheRight
            DataNavigationMode="DataGridNavigationMode.ShowAllDataRows"
            VerticalScrollBarMode="ScrollBarMode.Auto">
    <DxDataGridColumn Field=@(nameof(ItemOnTheRight.Value)) Width="40%">
        <DisplayTemplate>
            <input @ref=@((context as ItemOnTheRight).ValueFieldReference)
                   type="text"
                   class="w-100"
                   value=@((context as ItemOnTheRight).Value)
                   onchange="(args) => SetValue(args, context as ItemOnTheRight)" />
        </DisplayTemplate>
    </DxDataGridColumn>
    remaining n columns ...
</DxDataGrid>

Я уже пробовал две вещи (не решив мою проблему):

  • "форсировать" рендеринг:
      itemsOnTheRight.Add(newItem);
StateHasChanged();
await Task.Delay(1);
await itemsOnTheRight.LastOrDefault().ValueFieldReference.FocusAsync();
  • используйте флаг, чтобы сфокусировать ввод на AfterRender:
      protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (focus)
    {
        focus = false;
        await itemsOnTheRight.LastOrDefault().ValueFieldReference.FocusAsync();
    }
}

0 ответов

Другие вопросы по тегам