Question : DataGrid(QuickGrid) How can I update on client side.

[callmekohei]

Problem Summary

I try DataGrid ( QuickGrid- vertualizing ) .

Bolero do not (dispatch GetBooks sql) in QuickGrid's GridItemsProvider .

Excepct

Bolero do (dispatch GetBooks sql) in QuickGrid's GridItemsProvider .

// What I really want ...
SQL is executed and data is displayed each time you scroll with the mouse

Environment Information

ver
Microsoft Windows [Version 10.0.19045.2486]

dotnet --version
7.0.102

client
  <PackageReference Include="Bolero" Version="0.*" />
  <PackageReference Include="Bolero.Build" Version="0.*" />
  <PackageReference Include="Bolero.HotReload" Version="0.20.4" />
  <PackageReference Include="Microsoft.AspNetCore.Components.QuickGrid" Version="0.1.0-alpha.22351.1" />
  <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.*" />

server
  <PackageReference Include="Bolero.Server" Version="0.*" />
  <PackageReference Include="Bolero.HotReload.Server" Version="0.20.4" />
  <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="6.0.*" />

C# model code

C# model code

code is here :
https://aspnet.github.io/quickgridsamples/datasources
> Remote Data

@inject HttpClient Http
@inject NavigationManager NavManager

<div class="grid" tabindex="-1">
    <QuickGrid ItemsProvider="@foodRecallProvider" Virtualize="true">
        <PropertyColumn Title="ID" Property="@(c => c.Event_Id)" />
        <PropertyColumn Property="@(c => c.State)" />
        <PropertyColumn Property="@(c => c.City)" />
        <PropertyColumn Title="Company" Property="@(c => c.Recalling_Firm)" />
        <PropertyColumn Property="@(c => c.Status)" />
    </QuickGrid>
</div>

<p>Total: <strong>@numResults results found</strong></p>

@code {
    GridItemsProvider<FoodRecall>? foodRecallProvider;
    int numResults;

    protected override async Task OnInitializedAsync()
    {
        // Define the GridItemsProvider. Its job is to convert QuickGrid's GridItemsProviderRequest into a query against
        // an arbitrary data soure. In this example, we need to translate query parameters into the particular URL format
        // supported by the external JSON API. It's only possible to perform whatever sorting/filtering/etc is supported
        // by the external API.
        foodRecallProvider = async req =>
        {
            var url = NavManager.GetUriWithQueryParameters("https://api.fda.gov/food/enforcement.json", new Dictionary<string, object?>
            {
                { "skip", req.StartIndex },
                { "limit", req.Count },
            });

            var response = await Http.GetFromJsonAsync<FoodRecallQueryResult>(url, req.CancellationToken);
            return GridItemsProviderResult.From(
                items: response!.Results,
                totalItemCount: response!.Meta.Results.Total);
        };

        // Display the number of results just for information. This is completely separate from the grid.
        numResults = (await Http.GetFromJsonAsync<FoodRecallQueryResult>("https://api.fda.gov/food/enforcement.json"))!.Meta.Results.Total;
    }
}

F# Code ( I try it )

View

let dataPage model (username: string) dispatch  =

  let dic: ref<seq<IDictionary<string,string>>> = ref null

  .quickGrid(
    div {
      comp<QuickGrid'<IDictionary<string,string>>> {
        "Virtualize" => true
        "ItemsProvider" => GridItemsProvider (myfunc dispatch model dic)
        // display columns..
        // omit...
      }
    }

  )

myfunc ( I would do dispatch GetBooks in myfunc )

let myfunc dispatch model (dic: ref<seq<IDictionary<string,string>>>) =
  fun (req:GridItemsProviderRequest<IDictionary<string,string>>) ->
    task {

        // 1. Create SQL
        let tableRowStartNumber        = req.StartIndex
        let tableRowDisplayEnableCount = req.Count
        let sql = $"select * from books where rowid between {tableRowStartCount} and {tableRowDisplayEnableCount}"

        // 2. Send sql
        dispatch GetBooks sql

        // 3. Recieved result
        dic.Value <- model.books.Value

        return GridItemsProviderResult.From(
            items= (dic.Value.ToList())
          , totalItemCount= dic.Value.Count()
        )

    }
    |> ValueTask<GridItemsProviderResult<IDictionary<string,string>>>

definition ( GridItemsProvider )

type GridItemsProvider<'TGridItem> =
   delegate of
      request: GridItemsProviderRequest<'TGridItem>
            -> ValueTask<GridItemsProviderResult<'TGridItem>>

I would appreciate it if you could show me (^_^)/

[Tarmil]

What happens here is that the message is dispatched; but the dispatch function just queues the message to be processed. It doesn't wait for it (or the Cmds it caused) to be completed. So when you look at the model right after calling it, nothing has changed yet.

I think a good way of doing this would be to pass a callback in GetBooks, that would be called at the end of processing it in the update function.

So you would declare your message type like this:

type Message =
    | GetBooks of sql: string * onCompletion: (IDictionary<string, string> -> unit)

then replace your steps 2 and 3 with:

let! dic = Async.FromContinuations (fun (onCompletion, _, _) ->
    dispatch (GetBooks (sql, onCompletion)))

and finally, in the update function, at the end of processing GetBooks, call onCompletion with the retrieved books.

Additionally, this gets rid of all the mutation you have, both with the local dic value, and in your model.