0

Look at this blazor server page:

@page "/"

<div>@count</div>

<MyGridComponent Count="@Count" />

@code
{
    private int count { get; set; }
}

The grid component contains an IQueryable. User can apply custom filters inside this component.

I want to display the number of records, taking care of custom filters outside the grid component.

Is it possible to transfert count parameter value in this direction (from component to parent component) ?

I have tried to work with an event, but the code is heavy, i need to implement a method for that.

Thanks

Bob5421
  • 7,757
  • 14
  • 81
  • 175
  • 1
    The code for 2-way binding is exactly 2 lines. I recommend the following site for people new to Blazor. https://blazor-university.com/components/two-way-binding/ – Bennyboy1973 Feb 19 '22 at 21:27
  • Why not have all your data in a DI service, with events to notify changes. Then whomever needs to know about changes to say the DataSet in the service just hooks up to the `DataSetChanged` event and calls `StateHasChanged` to refresh the display of the recordcount in the service. – MrC aka Shaun Curtis Feb 20 '22 at 20:02
  • thanks, that's a good idea – Bob5421 Feb 20 '22 at 20:22
  • FYI - There's an answer I wrote a while ago to a similar question that demonstrates how to build such a service for the WeatherForecasts in the out-of-the-box template - https://stackoverflow.com/questions/69558006/how-can-i-trigger-refresh-my-main-razor-page-from-all-of-its-sub-components-wit – MrC aka Shaun Curtis Feb 20 '22 at 22:18

2 Answers2

0

Your MyComponent should have EventCallback which returns no of rows in grid after each filter operation

[Parameter]
public EventCallback<int> RowCount{ get; set; }

private void ApplyCustomFilter(){
    if(RowCount.HasDelegate) RowCount.InvokeAsync(NoOfRowsInGrid);
}

Now your razor page can subscribe to RowCount Callback in MyComponent

@page "/"

<div>@count</div>

<MyComponent RowCount="@(count=> // here count will have latest no of rows in grid)"/>
Surinder Singh
  • 1,165
  • 1
  • 3
  • 11
-1

Note that the event name is EXACTLY the name of the variable with the word Changedadded to the end.

Parent.razor

@page "/"

<div>@count</div>

<MyGridComponent @bind-RowCount="@Count" />

@code
{
    private int count { get; set; }
}

Child.razor

// some markup here

@body
[Parameter]
public int RowCount {get; set;}
[Parameter]
public EventCallback<int> RowCountChanged {get; set;}

async task Processrows (){
     await RowCountChanged.InvokeAsync(newNumberOfRows);
}
Bennyboy1973
  • 3,413
  • 2
  • 11
  • 16