Free text entry - Add item to the list.

[chrissainty]

Investigate the ability to add the text entered as a search, as a new value. I'm not sure that makes sense to anyone else, but I know what I mean! 😆

The example would be if the typeahead was used for selecting a city. If the city exists a user can select it as normal, if it doesn't it can be added.

[vertonghenb]

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?.

[chrissainty]

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.

[vertonghenb]

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

[chrissainty]

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

[vertonghenb]

Note to self:

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

[Whyskass]

Hey guys,

Any updates concerning this Free Text Entry issue?

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

Best,
L.

[chrissainty]

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.

[Whyskass]

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

[vertonghenb]

This is going to be blocked by #66

[Justincale]

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.

[vertonghenb]

@Justincale pretty sweet solution!

[chrissainty]

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.

[vertonghenb]

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

[fnils]

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>

[chrissainty]

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