We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hello,
please look into this code: https://github.com/bc3/syncfusion-autocomplete-setvalue
We have a SfAutocomplete with a DataManager, we bind it to a value, the initial binding is working.
Then do these steps: type in Ca, you will get a dropdown, and you get Canada when you select it, and the selected value = CA
Then click "Set Bermuda", the Selected value will become CA, but the Text also , and Not Canada as expect from an autocomplete control (in your ASP.NET Mvc components you have a public function to do this: SelectValueByKey , from docs )
An additional weird behaviour, click the button "Add Belgium", that country is added to the data collection. When you then click on the button "Set Belgium", the expected behaviour works.
There is also a button "Set Italy" to test, but same, it does not work.
Pleasr
Hi Ben,
When validating the reported issue on our end this is not an issue from our component. In your countryadaptor read method return only two items when filtering the data type in Ca. so after that the returned two data consider the components data source so after your external button click you have not triggered the Read method so the updated value does not have the component data source so the ID value updated instead of the text value. Which is the reason the sample updated the ID instead of text after filtering the data.
Regards,
Sureshkumar P
Hi Sureshkumar P,
So if i understand you correct, I cannot set the value from outside the component, nor can I "force" trigger the read.
I would say this is very disturbing, because that is what you expect from a ui component library.
You have ui components bound to a data model, and that you set the ui components to the correct values.
So hypothetical let us compare this case to an easier to understand component, the checkbox.
You tell me I cannot put a checkput to check when it is bound to a boolean value = true.
Nor can i check a checkbox from outside the component, like clicking on a button ?
What you have anwsered is that my checkbox would show the value TRUE instead of a nice ☑
Please come back on this issue, because is is very important
What do you suggest then that we do ?
Regards Ben
Ben, you misunderstood our explanation in your server-side read method not return the data correctly when filtering the value to the component the data source was reset as a filtered result value so after the filtering you dynamically updated the value not found in the data source which is the reason you have faced the issue on your sample.
To know more about the custom adaptor, refer to the below code and documentation link.
Find the code example here:
|
<SfAutoComplete @ref="autoObj" TValue="string" AllowFiltering="true" @bind-Value="AutoValue" EnableVirtualization="true" TItem="Order" Query="Query"> <SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="@Syncfusion.Blazor.Adaptors.CustomAdaptor"></SfDataManager> <AutoCompleteFieldSettings Value="OrderID" Text="CustomerID"></AutoCompleteFieldSettings> <AutoCompleteEvents TValue="string" TItem="Order" Filtering="OnFilter"></AutoCompleteEvents> </SfAutoComplete>
<button @onclick="UpdateValue">Update BLONP</button>
@code{ SfAutoComplete<string, Order> autoObj; public string AutoValue {get;set;} public static List<Order> Orders { get; set; } public Query Query = new Query().Take(5); protected override void OnInitialized() { Orders = Enumerable.Range(0,6).Select(x => new Order() { OrderID = (1000 + x).ToString(), CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID", "Queen Cozinha bistro" })[new Random().Next(5)], Freight = 2.1 * x, }).ToList(); }
void UpdateValue() { this.AutoValue = "1005"; } public class Order { public string OrderID { get; set; } public string CustomerID { get; set; } public double Freight { get; set; } }
// Implementing custom adaptor by extending the DataAdaptor class public class CustomAdaptor : DataAdaptor { // Performs data Read operation public async override Task<object> ReadAsync(DataManagerRequest dm, string key = null) { IEnumerable<Order> DataSource = Orders; if (dm.Search != null && dm.Search.Count > 0) { // Searching DataSource = DataOperations.PerformSearching(DataSource, dm.Search); } if (dm.Sorted != null && dm.Sorted.Count > 0) { // Sorting DataSource = DataOperations.PerformSorting(DataSource, dm.Sorted); } if (dm.Where != null && dm.Where.Count > 0) { // Filtering DataSource = DataOperations.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator); } int count = DataSource.Cast<Order>().Count(); if (dm.Skip != 0) { //Paging DataSource = DataOperations.PerformSkip(DataSource, dm.Skip); } if (dm.Take != 0) { DataSource = DataOperations.PerformTake(DataSource, dm.Take); } await Task.Delay(100); return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource;
} } public async Task OnFilter(FilteringEventArgs args) {
args.PreventDefaultAction = true; var query = new Query().Take(5); var FilterQuery = new Query().Where(new WhereFilter() {
Field = "CustomerID",
value = args.Text,
Operator = "contains",
IgnoreCase = true
}).Take(10);
query = (args.Text == "") ? query : FilterQuery;
await this.autoObj.Filter(this.autoObj.DataSource, query); } } |
Find the documentation here: https://blazor.syncfusion.com/documentation/autocomplete/data-source#custom-adaptor
Find the sample in the attachment:
