Event onchange on result template

[aelmen]

Since i am a newbee to blazor there might be an easy solution for my question.

Server Side Blazor

I have a main page with a child component that has a typeahead component, three levels, main -> component -> typeahead. How do I bubble up the event from typeahead to the main page?
I've managed to get it to the degree that the event bubbles up to the main page, but then the typeahead component disappears. So I'm probably doing something wrong. Can you put an event callback on the template for the result on change? Or is it a completely wrong implementation?

[chrissainty]

I prefer not to add an EventCallback as I think it’s best to let the consuming developer decide if they want to call StateHasChanged rather than forcing it on them.

Could you provide some example code of what you’re attempting?

[aelmen]

Hi!

Sure. I bet this is an easy task, I just need help to figure it out.

index.razor
`@page "/"

@if (Equals(SelectedProjekt, null).Equals(false))
{

@SelectedProjekt.DisplayName

} @code{ ///

/// Here I need an event for ui refresh when selectedprojekt has changed. ///

Data.Projekt SelectedProjekt { get; set; } } `

ProjektComponent.razor

`
@Inject Data.Services.ProjektService ProjektService
<BlazoredTypeahead SearchMethod="@find" MinimumLength="3" Placeholder="Sök" @bind-Value="SelectedProjekt">

@context.Kund.Name - @context.DisplayName


@context.Kund.Name - @context.DisplayName


@if (Equals(SelectedProjekt, null).Equals(false))
{
if (ShowSelectedDetails)
{

@SelectedProjekt.Kund.Name

@SelectedProjekt.Kund.Notis

@SelectedProjekt.DisplayName

} } @code { [Parameter] protected Data.Projekt SelectedProjekt { get; set; } ///

/// ///

[Parameter] public bool ShowSelectedDetails { get; set; } ///

/// ///

/// /// private Task> Find(string searchText) { return ProjektService.Find(searchText); } } `

[chrissainty]

Ok I think this should work or at least get you most of the way there.

In your ProjektComponent you need to add the below into the code section:

private Data.Projekt _selectedProject;
[Parameter] protected Data.Projekt SelectedProjekt
{
    get => _selectedProject;
    set
    {
        _selectedProject = value;
        OnProjectChanged?.Invoke(_selectedProject);
    }
}
[Parameter] Func<Data.Projekt> OnProjectChanged { get; set; }

Then in your parent component do this:

<ProjektComponent OnProjectChanged="HandleProjectChanged" />

@if (Equals(SelectedProjekt, null).Equals(false))
{

    @SelectedProjekt.DisplayName

}

@code{
    /// Here I need an event for ui refresh when selectedprojekt has changed.
    Data.Projekt SelectedProjekt { get; set; }

    private async Task HandleProjectChanged(Data.Projekt selectedProjekt)
    {
        SelectedProjekt = selectedProjekt;
        StateHasChanged();
    }

}

Let me know how you get on.

[aelmen]

Since the Func<Data.Projekt> did not allow me to pass any args when doing invoke I switched to use an Event Handler.

In Child Component

   /// <summary>
    /// Private Placeholder
    /// </summary>
    private Data.Projekt _selectedProjekt;
    /// <summary>
    /// Data Binding
    /// </summary>
    [Parameter]
    protected Data.Projekt SelectedProjekt
    {
        get => _selectedProjekt;
        set
        {
            _selectedProjekt = value;
            OnProjectChanged?.Invoke(this, _selectedProjekt);
        }
    }
    /// <summary>
    /// Event Handler
    /// </summary>
    [Parameter] EventHandler<Data.Projekt> OnProjectChanged { get; set; }

In Parent Component

<ProjektComponent ShowSelectedDetails="true" OnProjectChanged="HandleProjectChanged" >
</ProjektComponent>

@if (Equals(SelectedProjekt, null).Equals(false))
{
    <div class="jumbotron">
        <p>@SelectedProjekt.DisplayName</p>
    </div>
}
@code{
    /// <summary>
    /// 
    /// </summary>
    protected Data.Projekt SelectedProjekt { get; set; }
    /// <summary>
    /// Event Handler
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="projekt"></param>
    void HandleProjectChanged(object sender, Data.Projekt projekt)
    {
        SelectedProjekt = projekt;
        StateHasChanged();
    }
}

This seem work like a charm. I have no idéa of if this is a good implementation or not. Any suggestions?

I belive you can close this issue now since there is no need for an event on the result template.

[chrissainty]

Glad to hear you got it sorted, I’m not sure why you had an issue with using Func<> though.

[aelmen]

Thats was just beacuse the Func<> did not work with invoke(arg). To get that one working I had to do a Func<in,out> From: Chris Sainty <notifications@github.com> Sent: Sunday, 4 August 2019 13:50 To: Blazored/Typeahead <Typeahead@noreply.github.com> Cc: Anders Elmén <anders@need2code.se>; Author <author@noreply.github.com> Subject: Re: [Blazored/Typeahead] Event onchange on result template (#21) Glad to hear you got it sorted, I’m not sure why you had an issue with using Func<> though. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#21?email_source=notifications&email_token=ABJF5GBUY6GCGZXRXKVL2EDQC27ADA5CNFSM4IHMNBXKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3QABRA#issuecomment-517996740>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ABJF5GCVIPIUB6Y25C34IVDQC27ADANCNFSM4IHMNBXA>.