Blazor QuickGrid: Reset virtualized grid scroll position with new data source

Question

I'm very new to Blazor, and equally new to QuickGrid component (which is in preview). I'm not really sure if this question is a general Blazor question, or a QuickGrid question!

In short my question is:

How do I reset the position of a virtualized QuickGrid when I get completely new data?

I have a customer search, and displaying results as a virtualized list.

I have a QuickGrid with an ItemsProvider.

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

When a search is triggered a new ordersProvider is created, and the request is captured by the closure to run again after the user scrolls. This works fine and doesn't even seem to need 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();
}

The problem is if I search for Steve and then scroll down and run a new search for Mary the scroll position will remain where it was before.

As per the QuickGrid sample for virtualization I had to create the css to handle the scroll container and then the component does all the calculation to see what the items are.

There's two ways I can think of to reset the grid:

• Completely redraw it and create a new one. (not sure how to do this without a hack)
• Use Javascript to reset the scroll position. (doesn't seem very Blazor like)

I want to make sure I'm not missing something. I couldn't even find how this would be done with the normal Virtualization component. Since I'm new to Blazor I don't yet know when I would typically need to reach for JS - but this seems like a case where I shouldn't have to.

Answer 1

Ok this seems to work at least as a temporary solution.

• Set an items provider with no items.
• Call RefreshDataAsync.
• Set the new items provider with the new search.

This triggers the browser to reset the scroll position since there are no items.

I actually don't understand how it works though! Since ordersProvider is a component parameter I wouldn't have expected it to be set in time for the RefreshDataAsync call.

But it seems to work :-) I welcome better (especially from Microsoft) solutions or explanation of how it works!

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