Comments (15)
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. TheTask
is there to make sure the user can call a DB or API or somethingasync
. Thestring
is there so he can use thesearch 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
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.
Related Issues (20)
- [Bug] When used in a child component in multiselect mode items not added when selected HOT 1
- Have a OnClose Option for the Dropdown list
- [Question] Are you able to just use strings for Value and date related bindings on the control?
- Two way binding
- Typeahead search text dissapearing from search box after displaying results in v 4.7.0 HOT 14
- [Feature Request] Option to disable deleting items with "Backspace" when using MultiSelect
- Method to Force results dropdown to close?
- how to Enable mutli line
- Laptop touchpad not selecting item in results
- Error in "Using complex types but only binding to a single property" HOT 1
- [Bug] - blazored-typeahead results hides behind the modal-footer
- [Bug] Typeahead inside Blazored.Modal search text erase with .NET 7.0 HOT 3
- [Question] How to Justify Dropdown Content
- [Bug] ArgumentNullException after pressing 'backspace' key
- Clicking typeahead inside MudTable in <MudTd> by MudBlazor not set to Focus
- [Bug] Multiple Pasting of text into the control causes app pool to crash
- WORK PAUSED - PLEASE READ BEFORE POSTING AN ISSUE HOT 1
- how to set category id for Searchmethod HOT 1
- Scroll in dropdown menu
- Request to render as a semantic list, rather than divs
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from typeahead.