Blazor AutoQueryGrid - Adding Toolbar Buttons and Search

Blazor WASM
1

I’m super stoked we now have a supported grid with Service Stack so a big thanks! I have a couple questions:

I noticed the docs show there is a [ToolbarButtons] (https://github.com/ServiceStack/ServiceStack/blob/main/ServiceStack.Blazor/src/ServiceStack.Blazor/Components/Tailwind/AutoQueryGrid.razor.cs#L38)

RenderFragment on the Grid but I don’t see it used anywhere. Can we inject a textbox in the header. I’m looking to add a search input and button but prefer it be on the toolbar.

In the meantime I will add a search outside the grid but it isn’t entirely clear to me how I can add this search term to the autoquery dto that is being sent. It is defined on the backend but not sure how to populate it. Any help would be appreciated.

2

The AutoQueryGrid supports additional filters on the QueryString so if your search box changes the URL to ?FieldToSearch=SearchText it should be reflected in the AutoQueryGrid results.

Seems Toolbar support was lost during a refactor, added it back in latest v6.4.1+ that’s now available on MyGet where you should be able to add new ones with:

<AutoQueryGrid>
  <ToolbarButtons>
    <div class="pl-2"><button>1</button></div>
    <div class="pl-2"><button>2</button></div>
  </ToolbarButtons>
</AutoQueryGrid>

I’ve also added a ConfigureQuery action parameter which will let you modify the AutoQuery request before its sent but you’d need to cast it to your AutoQuery DTO to access any concrete properties, e.g:

ConfigureQuery = x => { var q = (MyAutoQuery)x; }

Or you can add filters to x.QueryParams where they’ll be sent in the QueryString.

3

Thanks. I’ll check out the new bits tomorrow but can you elaborate on the statement below. How do I change the URL the Autoquery grid sends? I don’t see any examples or documentation on it. I understand how autoquery works just not how to manipulate what the grid sends currently?

4

You change the URL of the page with Blazor’s NavigationManager

5

I must be missing something here or you might be referring to the locode stuff which I’m not using.

A simple example, take a page like this:

@page "/grid-test"
// using

<input @bind=searchTerm type="text" />
<AutoQueryGrid Model="JobGridQuery"   Apis="Apis.AutoQuery<JobsRequest>()">

I want to populate the JobsRequest dto’s field SearchTerm with the value. My issue is there doesn’t seem to be anything exposed on the Grid’s parameters that allows this although the ConfigureQuery seems like it will work. Add query params to the page didn’t do change what was sent by the grid…

6

Do you know how to change the URL with Blazor’s NavigationManager?

You can also use the SetQueryParam ext method to replace a QueryParam, e.g:

@inject NavigationManager Navigation

//...
Navigation.NavigateTo(NavigationManager.Uri.SetQueryParam("MyProperty",searchTerm));

If you add the QueryString to the URL it will get applied to the query.

In v6.4.1 on MyGet I’ve added ConfigureQuery mentioned in previous comment.

7

I tried this with a property exposed on the grid and one that is not (SearchTerm). The grid did not call the service again after the URL updates in both cases.

I will check out the ConfigureQuery tomorrow as that seems a little more intuitive for me at least.

I appreciate all the help, I know with the new bits there might be some growing pains for all.

8

Ok but using the URL is how you would filter the results, e.g:

https://blazor-gallery.servicestack.net/grid/contacts-meta?Id=3

9

It works if I browse directly to it but not via the navigation manager. Anyways, I checked out the new ConfigureQuery which makes sense but how do I programmatically cause the grid to reload/refresh? I didn’t see any parameters or a way to do this that would make this come together. The navigation manager isn’t working in my case so being able to add a ref to the grid and call its refresh/update would be nice. Perhaps you can expose UpdateAsync (link)

As a follow up, changing the URL only works if there is one grid on the page, more than one this strategy will run into conflicts.

10

I’ve made UpdateAsync public and added a friendlier SearchAsync(QueryBase) which accepts a populated Request DTO you should create with CreateRequestArgs() that you can modify before calling.

This change is available from v6.4.1+ that’s now available on MyGet.

1 Like
11

SearchAsync works great. Thank you! I should mention the paging is not functioning now so something might be impacting it. The pager changes but doesn’t make API calls anymore.

Also, I might suggest adding a native refresh method or toolbar button. Not an uncommon situation to try and refresh the grid to see if there is new data. The current implementation checks to see if the params are different before executing.

12

I’ve just added a Refresh button, thx for the suggestion and if the paging issue was due to request caching it should now be resolved, now available from the latest v6.4.1+ on MyGet.

1 Like
13

I’m still seeing the paging issue as well as the filter panel not working properly. Not sure if this is related to my project or general. If I have time today to do a repro I will.

14

I tracked the paging down to an issue in my project but not sure why it works in the newer templates. I have to add [Parameter, SupplyParameterFromQuery] public int Skip { get; set; } = 0; to the page that contains the grid in order that the URL changes to get picked up. In the event anyone else is having the same issue.

After testing I noticed that on page load (f5 full load) if you have a skip set it will execute the query 4 times. None of those are OPTION calls in the screenshot.

image
image1314×600 35.6 KB

And if you are on a page > 1 and Enter a filter that returns no data or data that does reach the current page it is a strange state. I think a filter change should result in resetting the page back to 1 or at least give us the option to do that.

15

The request caching should prevent duplicate requests but everytime parameters change the component needs to calculate if the requests are different given there are different skips I’m assuming that the parameters values are toggling invalidating the previous request results.

There should be a Reset Preferences & Filters button appearing when there are filters:
image

I’ve also added a ClearFiltersAsync() API for clearing column filters and a ResetPreferencesAsync() to reset preferences and filters. This change is available from latest v4.6.1 now on MyGet.

1 Like
16

Managed to repro this issue which looks like the result of a design decision not to propagate navigation params down to nested components:

I’ve worked around this by switching to manually detecting NavigationManager location changes which should now work without the Skip property hack.

1 Like
17

Thank you!

What is the correct way to hide the filter ability on a per column basis? Right now I’m assigning it to a reference property but that just seems dirty. For instance I am adding a column with some icons/buttons and it isn’t filterable or sortable.

18

By default it doesn’t allow filtering for Complex Types or [Computed] properties, but I’ve just added a <Column AllowFiltering="false" /> property you can use to disable it, now available on MyGet.

1 Like
19

Damn, you’re awesome.

1 Like