Blazor QuickGrid: сброс положения прокрутки виртуализированной сетки с использованием нового источника данных

Я новичок в Blazor и в равной степени новичок в компоненте QuickGrid (который находится в предварительной версии). Я не совсем уверен, является ли этот вопрос общим вопросом Blazor или вопросом QuickGrid!

Короче мой вопрос:

Как мне сбросить положение виртуализированной QuickGrid, когда я получаю совершенно новые данные?

У меня есть поиск клиентов и отображение результатов в виде виртуализированного списка.

у меня естьQuickGridсItemsProvider.

      <QuickGrid @ref="OrdersQuickGrid" ItemsProvider="@ordersProvider" 
           Virtualize="true" ItemSize="@itemHeight">

Когда поиск запускается новыйordersProviderсоздается, и запрос перехватывается замыканием для повторного запуска после прокрутки пользователем. Это отлично работает и, похоже, даже не нужноRefreshDataAsync().

      public async Task SearchOrders(SearchOrdersCriteria criteria)
{
    SearchOrdersCriteria currentSearch = new SearchOrdersCriteria
    {
        SmartSearchString = criteria.SmartSearchString
    };

    // create new orders provider
    ordersProvider = async providerRequest =>
    {
        var result = await RunSearch(providerRequest, currentSearch);

        return result;
    };

    // refresh data - no effect with either of these
    // StateHasChanged();        
    // await OrdersQuickGrid.RefreshDataAsync();
}

Проблема в том, что если я ищуSteveа затем прокрутите вниз и запустите новый поискMaryположение прокрутки останется там, где оно было раньше.

В соответствии с примером QuickGrid для виртуализации мне пришлось создать CSS для обработки контейнера прокрутки, а затем компонент выполняет все вычисления, чтобы увидеть, что это за элементы.

Я могу придумать два способа сброса сетки:

  • Полностью перерисуйте его и создайте новый. (не знаю, как это сделать без взлома)
  • Используйте Javascript для сброса положения прокрутки. (похоже, не очень похоже на Блейзора)

Я хочу убедиться, что я ничего не упускаю. Я даже не смог найти, как это можно сделать с помощью обычного компонента виртуализации . Поскольку я новичок в Blazor, я еще не знаю, когда мне обычно нужно обращаться к JS, но похоже, что это тот случай, когда мне не следует этого делать.

1 ответ

Хорошо, похоже, это работает, по крайней мере, как временное решение.

  • Установите поставщика элементов без элементов.
  • Вызов .
  • Установите поставщика новых элементов с помощью нового поиска.

Это заставляет браузер сбросить положение прокрутки, поскольку элементов нет.

Хотя я вообще не понимаю, как это работает! СordersProviderэто параметр компонента, я не ожидал, что он будет установлен вовремя дляRefreshDataAsyncвызов.

Но, похоже, это работает :-) Я приветствую лучшие (особенно от Microsoft) решения или объяснения того, как это работает!

      public async Task SearchOrders(SearchOrdersCriteria criteria)
{
    SearchOrdersCriteria currentSearch = new SearchOrdersCriteria
    {
        SmartSearchString = criteria.SmartSearchString
    };

    // reset grid by setting items provider to an empty list
    ordersProvider = async providerRequest =>
    {
        return new GridItemsProviderResult<CRMOrder>
        {
            Items = new CRMOrder[0],
            TotalItemCount = 0
        };
    };

    await OrdersQuickGrid.RefreshDataAsync();

    // create new orders provider
    ordersProvider = async providerRequest =>
    {
        var result = await RunSearch(providerRequest, currentSearch);

        return result;
    };
}
Другие вопросы по тегам