Blazored Typeahead Set Value on load

Question

I have a blazored TypeAhead Component Called SearchSelect. Here is the code:

@using _3T.OPAMS.Entities.Models
@inject ISearchService SService 
<BlazoredTypeahead SearchMethod="SearchItems"
                   TValue="SearchResult"
                   TItem="SearchResult"
                   Value="SelectedItem"
                   ValueChanged="@((SearchResult i) =>TriggerCallback(i))"
                   ValueExpression="@(()=> SelectedItem)"
                   Debounce="500" class="form-control"
                   Placeholder="@($"Search for {SelectType.Humanize()}...")">
    <SelectedTemplate Context="item">
        <b class="text-bold me-2">@item.Name</b>
    </SelectedTemplate>
    <ResultTemplate Context="item">
        <div class="d-flex text-sm">
            <div>
                <b class="text-bold">@item.Name</b><br />
                @item.Description
            </div>
        </div>
    </ResultTemplate>
    <NotFoundTemplate Context="itemtype">
        Sorry, there weren't any search results.
    </NotFoundTemplate>
</BlazoredTypeahead>
<h4>@SelectedItem?.Name</h4>
@code {
    private SearchResult SelectedItem;
    [Parameter] public SSelectType SelectType { get; set; }

    [Parameter] public EventCallback<SearchResult> OnChange { get; set; }
    [Parameter] public EventCallback<int> OnChangeId { get; set; }

    public void SetValue(SearchResult sr)
    {
        SelectedItem = sr;
    }

    private async Task TriggerCallback(SearchResult item)
    {
        await OnChange.InvokeAsync(item);
        if (item != null)
        { await OnChangeId.InvokeAsync(item.Id); }
        SelectedItem = item;
    }

    private async Task<IEnumerable<SearchResult>> SearchItems(string searchText)
    {
        switch (SelectType)
        {
            case SSelectType.Collection:
                return (await SService.Collections(searchText));
            case SSelectType.MainMaterial:
                return (await SService.MainMaterials(searchText));
            case SSelectType.SecondaryMaterial:
                return (await SService.MainMaterials(searchText));
            case SSelectType.Finishing:
                return (await SService.Finishes(searchText));
            case SSelectType.ItemType:
                return (await SService.ItemTypes(searchText));
            default:
                return (await SService.All(searchText));
        }
    }
}

I'm using it like:

 <div class="col-md-4 form-group">
                        <label>@Localize["Collection"]</label>
                        <SearchSelect @key="1" @ref="CSelect" OnChangeId="(id)=> Entity.CollectionId=id" SelectType="SSelectType.Collection" />
                        <ValidationMessage For="@(() => Entity.CollectionId)" />
                    </div>

And then in code I've a reference.

protected SearchSelect CSelect { get; set; }

And then in OnIntializedAsync Method, Im setting:

 if (Entity.Collection != null)
            {
                CSelect.SetValue(new SearchResult(Entity.Collection));
            }

But, the problem is that the value is not getting set. Any inputs would be helpful. Thanks.

score 1 · Answer 1 · answered Oct 04 '21 at 16:24

1

Use OnAfterRender instead of OnInitialized/OnInitializedAsync;

References of components its not available on On Initialized and you can not access them.

protected override Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        if (Entity.Collection != null)
        {
            CSelect.SetValue(new SearchResult(Entity.Collection));
        }
    }
}

answered Oct 04 '21 at 16:24

mRizvandi

983
1
8
20

Tried but this also Doesn't work. – Ashish Charan Oct 04 '21 at 19:20
It is able to call the function. The break point is hit. But the value doesn’t update in typeahead. – Ashish Charan Oct 05 '21 at 07:52

Blazored Typeahead Set Value on load

1 Answers1