Как установить фокус на новое поле ввода внутри строки таблицы данных?
Я работаю с 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();
}
}