Skip to content

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

Open
@callmekohei

Description

@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 (^_^)/

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions