HxGrid How Should I setup my code as it seems like DataProvider Always runs

[chobo2]

Hi

I want to use HxGrid but trying to figure out how to best do this. Maybe it is how I am organizing my code what makes it a bit complicated.

What I am trying to do

I have multiple input boxes with a search button. They type in whatever and hit the search button. If there are no results, I want to display a message like "No results found". I do not really want to show an empty grid that has "no data in it".

If Search results are found, then I want to display the grid. The grid will have pagination that is "dynamic" for example, 10 results will come back and will be shown until they hit the next page and load the next 10.

How I'm organizing my code

-SearchPage

• SearchComponent -> has all the input boxes and search button
• NoResultsFoundComponent -> debating if I should add this to the SearchComponent (could be a standalone component but inserted into the component instead of the page level
• GridCompoent -> will be used to display the results

 @renderMode="RenderMode.InteractiveSever"
<h1> Search Page </h1>
<SearchComponent   SearchResults="SearchResultsChanged" />

@if(Results != null && Results.Count == 0)
{
    <NoResultsFound />
}
else if(Results.Count > 0){
// want to make this in a component (<GridCompoent  />) but not sure how to pass in the results yet properly.
<HxGrid @ref="gridComponent" TItem="ResultsDto" Responsive="true" DataProvider="GetGridData" PageSize="5">
    <Columns>
		<HxGridColumn HeaderText="LCID" ItemTextSelector="@(item => item.LCID.ToString())" SortKeySelector="@(item => item.LCID)" IsDefaultSortColumn="true" />
		<HxGridColumn HeaderText="DisplayName" ItemTextSelector="@(item => item.DisplayName)" SortKeySelector="@(item => item.DisplayName)" />
		<HxGridColumn HeaderText="Name" ItemTextSelector="@(item => item.Name)" SortKeySelector="@(item => item.Name)"  />
		<HxGridColumn HeaderText="EnglishName" ItemTextSelector="@(item => item.EnglishName)" SortKeySelector="@(item => item.EnglishName)"  />
	</Columns>
</HxGrid>}

@code {
   public List<ResultsDto> Results {get; set;} = null
  private HxGrid<ResultsDto>? gridComponent;

  public async Task SearchResultsChanged(List<ResultsDto> results)
{ 
      Results  = results;
     await gridComponent.RefreshDataAsync();
}

private Task<GridDataProviderResult<ResultsDto>> GetGridData(GridDataProviderRequest<ResultsDto> request)
	{
           
		var results = myService.Search("Test", request.StartIndex, request.Count!.Value);
        return Task.FromResult(new GridDataProviderResult<ResultsDto>
		{
			Data = results 
			TotalCount = results.Count()
		});
	}

}

Right now how it is I am basically calling the data twice, once when the button is clicked which returns the results which then goes and renders my HXGrid, which then calls the provider which then grabs the data again.

[hakenr]

If you want to load all the data at once, then user the Results as a parameter of GridComponent you want to create and inside the DataProvider just use request.ApplyTo(Results) to allow paging/sorting over the IEnumerable loaded.

[hakenr]

If you don't want to load all the results, you cannot use TotalCount = results.Count() as the TotalCount in GridDataProviderResult is used to manage paging (you have to provide it with count of all items available and with the fragment of items requested for the grid to be displayed).

You might want to divide the data loading into two separate calls:

1. _totalCount = myService.GetSearchResultCount(...) which you will populate from HandleSearchResultsChanged
2. Data = myService.GetSearchResultData(..., request.StartIndex, request.Count) where you will gather the data-fragment requested in DataProvider

...you can then use the _totalCount value in the condition whether to display the <NoResultsFound /> or <SearchResultsGridComponent TotalCount="_totalCount" /> (where you can pass the count to the inner grid and use it in DataProvider to for TotalCount property of the GridDataProviderResult.

[chobo2]

Yep, I figured that with Total count and that make sense and how most libraries would work as you need to give a total count as you said for paging to work correctly.

My problem is that I wanted to get the first set of "data" on click of a search button. Then I would like to pass it to hxGrid, but I don't see how to pass it to it other than using it in the DataProvider.

Ideally what I would like to have done is on search button, get initial data back and total count, pass that to the hxgrid and render it. On click on Paging (example page 1 to page 2) then a Pagining event would be triggered and I could then do a query there to get the data back for that page.

It just seems like the DataProvider is used for both initial loading of data and for paging. What is nice if you are loading the data on say page load with no "search" trigger.

the only way I have come up with though not sure if it is the greatest. Is now on "search button". I have an event that takes the search criteria and brings it back to the parent and then in the DataProvider I do the actual search using the provided criteria and get back X results and then another method to get the total count.

[hakenr]

Yes, DataProvider is the only way to handover data to the HxGrid. But you can use data already loaded which you can store in a field meanwhile.

(+ The RefreshAsync() method on HxGrid might help you trigger the data (re)load when needed.)

[chobo2]

Yeah, I started to use some State/Services to get the data around then use The RefreshAsync()