Free text entry - Add item to the list. about typeahead HOT 15 CLOSED

Hi Guys,

I think, if i have read this correctly, that i may have a solution for very simple entities (in this case a Category has only Id and Name fields). I have a typeahead component that allows the user to search for categories as such:

        <BlazoredTypeahead SearchMethod="SearchCategories" EnableDropDown="true" placeholder="Select Category"
                           @bind-Value="@Component.Category" Context="Category">

            <SelectedTemplate>
                @{
                    Component.CategoryId = Category.Id;
                }

                @Category.Name
            </SelectedTemplate>
            <ResultTemplate>
                @Category.Name
            </ResultTemplate>
            <NotFoundTemplate>
                Category not found. <MatButton Icon="create" OnClick="@CreateCategory" Label="Create?"></MatButton>
            </NotFoundTemplate>
        </BlazoredTypeahead>

Take note of the 'NotfoundTemplate' where i have a button to create the category.

That CreateCategory method looks like this:

private void CreateCategory()
{
    Component.Category = new ComponentCategoryDto();

    Component.Category.Name = categorySearch;

    StateHasChanged();
}

Where i simply set the desired name of the entity to a variable named categorySearch. CategorySearch is set in the SearchCategories method:

private async Task<IEnumerable<ComponentCategoryDto>> SearchCategories(string searchText = null)
{
    categorySearch = searchText;

I'm not really sure how we would deal with Creating a Category (or any entity) that has multiple required fields but for simple cases this seems to work.

from typeahead.

We need to give some flexibility here.

• Add a new parameter which gives the user the flexibility to do whatever he likes as long as we get a Task<TItem> back, we don't really care. The Task is there to make sure the user can call a DB or API or something async. The string is there so he can use the search value we currently have.

[Parameter] public Func<string, Task<TItem>> CreateMethod { get; set; }

• If this method is specified, we can use the footertemplate or have another CreateTemplate Parameter which is a RenderFragment to show the "Create {Searchvalue}" he can invoke the create from his custom template or we can do so from the default template. afterwards we add the item to our list of suggestions.

I think we can provide something along these lines, we might need abit more handlers but i think it's fairly easy to implement and still give the user the most flexibility

@chrissainty

from typeahead.

@Justincale pretty sweet solution!

from typeahead.

This is now covered by the feature introduced in PR #215

from typeahead.

Maybe use the footer as ADD to list? Something like the github labels.
The problem however is creating a type of T, we could use an activator but what values have to be filled in?.

from typeahead.

Great minds! I thought about that and hit the same issue as you.

This feature is fine when dealing with primitives like string or int but complex type aren't going to work very easily.

from typeahead.

That sounds like a good plan @vertonghenb. It gives the most flexability to the developer and doesn't make things too complex to handle.

from typeahead.

Note to self:

• Check if we have issues with the Convert Method taking this approach

from typeahead.

Hey guys,

Any updates concerning this Free Text Entry issue?

Thanks anyway for the great job you're doing :)

Best,
L.

from typeahead.

Not yet @Whyskass. We'll get to this ASAP though, I've had a lot of other bits on recently so been a bit short on time.

from typeahead.

Sure no problem, thanks for the answer @chrissainty ;)

from typeahead.

This is going to be blocked by #66

from typeahead.

Just doing some housekeeping and it seems like @Justincale solution works without needing any modification our end. Based on that, I'm going to close this issue as there is a workable solution.

Anyone please feel free to reopen if further discussion is needed.

from typeahead.

This baby should be documented, Reopening to track in the FAQ

from typeahead.

If you can choose to "lock" the not found template view in open mode. Then you could add textboxes and button for saving in it.

<BlazoredTypeahead SearchMethod="SearchItems" @bind-Value="SelectedItem" Placeholder="Area">
        <SelectedTemplate>
            @context.Name 
        </SelectedTemplate>
        <ResultTemplate>
            @context.Name
        </ResultTemplate>
        <NotFoundTemplate>
                    <div class="col">
                        <RadzenTextBox Label="Area" @bind-Value="ItemName" />
                    </div>
                    <div class="col"><RadzenButton Raised="true" Click="@(async () => await Save())">Add area </RadzenButton></div>
        </NotFoundTemplate>
    </BlazoredTypeahead>

from typeahead.