dropdown that passes a parameter and recalculate after change

Question

I have a blazor server page that starts with a

<div class="rz-p-12 rz-text-align-center">
                    <RadzenDropDown TValue="string"   Value="CalendarPeriod2.Select( p => p.GlPeriodOracle).First()"  Data=@CalendarPeriod2.Select( p => p.GlPeriodOracle) />
                </div>


@code
{
public IEnumerable<CalendarPeriod> CalendarPeriod2 { get; set; } = null!;

    protected override async Task OnParametersSetAsync()
    {
    CalendarPeriod2 = await _db.GetCalendarPeriod2Async();

ProjectWipCalculations = await _db.GetCurrentMonthWIPData(projectList, CalendarPeriod2.PeriodFrom);

}

and this is the CalendarPeriod2:

public class CalendarPeriod2
{
    public int? Period { get; set; }

    public DateTime PeriodFrom { get; set; }

    public DateTime PeriodTo { get; set; }

    public string GlPeriodOracle { get; } = null!;

    public string GlPeriodCalendar { get; set; } = null!;
}

and then has some other methods that use the data on the CalendarPeriod item.

however, what I want is to have the page render the first time with a value that is calculated for the CalendarPeriod (CalendarPeriod2.PeriodFrom)

but when the user selects the dropdown for another item, I want to recalculate the "ProjectWipCalculations " with the new parameter for CalendarPeriod2.PeriodFrom. how can I do this? I'm struggling to get the parameter to be passed properly when selected in the dropdown (it's a radzen component) and then I want that when is changed, to be basically "re-run" the page with the new selected parameter.

I know this can be done, but I can't find an example of this behaviour to understand how to do it

Use `@bind-Value` for data binding and `Change` for the handler when a user selects a new value. — T.Trassoudaine, Mar 10 '23 at 17:45
I never actually used Radzen, so I don't know if you can actually use both at the same time, otherwise, use `Value` and `Change` but don't forget to update the property assigned to `Value` in the handler. — T.Trassoudaine, Mar 10 '23 at 17:49

score 1 · Accepted Answer · answered Mar 10 '23 at 18:27

Here's some demo code that should help you. If not it's the starting point of a mimimum reproducible example.

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

<div class="rz-p-12 rz-text-align-center">
    <RadzenDropDown TValue=CalendarPeriod @bind-Value:get=this.selectedValue @bind-Value:set=this.SetPeriod  Data=this.calendarPeriods TextProperty="Period" />
</div>

<div class="p-lg-2">
    Start of Period = @selectedValue?.PeriodFrom.ToLongDateString()
</div>
@code {
    private CalendarPeriod? selectedValue;

    protected override async Task OnInitializedAsync()
    {
        // fake a async Db Lookup for the data
        await Task.Yield();
        selectedValue = calendarPeriods.FirstOrDefault();
    }

    private async Task SetPeriod(CalendarPeriod period)
    {
        selectedValue = period;
        // fake some async activity
        await Task.Yield();
        //do some activity such as WIP calculations
    }

    //  Build some dummy data
    private List<CalendarPeriod> calendarPeriods = new()
    {
        new CalendarPeriod { Period=1, PeriodFrom=new DateTime(2023, 1, 1)},
        new CalendarPeriod { Period=2, PeriodFrom=new DateTime(2023, 2, 1)},
        new CalendarPeriod { Period=3, PeriodFrom=new DateTime(2023, 3, 1)},
        new CalendarPeriod { Period=4, PeriodFrom=new DateTime(2023, 4, 1)},
    };
}

public class CalendarPeriod
{
    public int? Period { get; set; }
    public DateTime PeriodFrom { get; set; }
    public DateTime PeriodTo { get; set; }
}

ok, this makes sense, thank you, however, one question, alongside the "wip calculations" I have serveral methods that use values from the CalendarPeriod being called in OnInitializedAsync(), what should I do in this case, put it all again inside the "SetPeriod"? is there a way to call again the OnInitializedAsync? (to mimic the page being called again with a different CalendarPeriod? — Baldie47, Mar 13 '23 at 13:19
I ended up putting a call to "OnInitializedAsync()" inside the "SetPeriod." I don't know if s the best approach, but so far it does what I need, which is to recalculate all stuff and render back after changing the period in the dropdown — Baldie47, Mar 13 '23 at 14:38
Don't do that. Break out whatever you need into a separate method and call StateHasChanged from that method. — MrC aka Shaun Curtis, Mar 13 '23 at 21:36
I've added that method call, but doesn't seem to change anything, should only be the call to StateHasChanged () from the method I want to trigger the reload? — Baldie47, Mar 14 '23 at 13:55
What I mean is you should never call `OnInitializedAsync` manually, except as a call to base in an overridden `OnInitializedAsync`. Ask another question if you like with your new code. — MrC aka Shaun Curtis, Mar 14 '23 at 15:07

dropdown that passes a parameter and recalculate after change

1 Answers1