Suppose you have a combobox on screen that allows a user to select a value from a list that is filtered based on value status - it only shows values where the status is 'Active'.
Today you select Value1 from the combobox 'Active' list and save the record.
Tomorrow Value1 status is changed to 'Inactive' and you come back to the record to find the combobox broken because the value is no longer in the lookup list.
What is the best practice to maintain the functionality of the combobox such that the record selected will remain visible, functionality remains intact, but the value is filtered out of the select-able options within the combobox list?
Hi Riley,
Thank you for reaching out us. From the information you provided, it appears that you are looking to bind a value to the ComboBox that is not present in the data source. This can be achieved by enabling the AllowCustom property in the ComboBox component.
We have created a sample that aligns with your requirements. In the button click event, we dynamically update the data source, and the value is maintained even after switching the data source. Please review the sample for further clarification.
Sample: https://blazorplayground.syncfusion.com/hXrTjBtMJldwLJnL
Regards,
Yohapuja S
Hi,
It's not working when the TItem is a struct.
I want to use KeyValuePair<string, string> as TItem but it won't display the custom value if the value is not in the DataSource. (and KVP is a struct).
If the "class Games" is changed to "struct Games", the value is not displayed anymore.
Please see the repro : https://blazorplayground.syncfusion.com/rthTDksPoGVEqIKM
Hi Riley,
Thank you for reaching out to us. We have reviewed your requirement and identified that the issue was due to the absence of a data source binding in your dropdown list component. To resolve this, we have provided a modified sample that includes the appropriate data source bindings.
Please find the updated sample code below:
|
@using Syncfusion.Blazor.DropDowns;
<SfComboBox @ref="ComboObj" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="GameValue" AllowCustom="true"> <ComboBoxFieldSettings Value="ID" Text="Text"></ComboBoxFieldSettings> </SfComboBox>
<SfComboBox TValue="string" TItem="KeyValuePair<string, string>" Placeholder="Select a game" DataSource="@TestList" @bind-Value="Test" AllowCustom="true"> <ComboBoxFieldSettings Value="Value" Text="Value"></ComboBoxFieldSettings> </SfComboBox>
<SfComboBox TValue="string" TItem="UserStruct<string, string>" Placeholder="Select a game" DataSource="@UserList" @bind-Value="UserValue" AllowCustom="true"> <ComboBoxFieldSettings Value="Value" Text="Value"></ComboBoxFieldSettings> </SfComboBox>
<SfComboBox TValue="string" TItem="UserClass<string, string>" Placeholder="Select a game" DataSource="@UserClassList" @bind-Value="UserClassValue" AllowCustom="true"> <ComboBoxFieldSettings Value="Value" Text="Value"></ComboBoxFieldSettings> </SfComboBox>
@code { SfComboBox<string, Games> ComboObj; public string GameValue { get; set; } = "Cricket"; public string Test { get; set; } = "Cricket2"; public string UserValue { get; set; } = "20"; public string UserClassValue { get; set; } = "10";
public List<KeyValuePair<string, string>> TestList = new() { new KeyValuePair<string, string>("1", "Cricket2"), new KeyValuePair<string, string>("2", "Soccer") };
public List<UserStruct<string, string>> UserList = new() { new UserStruct<string, string> { Key = "1", Value = "10" }, new UserStruct<string, string> { Key = "2", Value = "20" } };
public List<UserClass<string, string>> UserClassList = new() { new UserClass<string, string> { Key = "1", Value = "10" }, new UserClass<string, string> { Key = "2", Value = "20" } };
public class Games { public string ID { get; set; } public string Text { get; set; } }
public struct UserStruct<T, R> { public T Key { get; set; } public R Value { get; set; }
public override string ToString() => Value.ToString(); }
public class UserClass<T, R> { public T Key { get; set; } public R Value { get; set; } }
List<Games> LocalData = new List<Games> { new Games { ID = "1", Text = "Football" }, new Games { ID = "2", Text = "Basketball" } }; }
|
For further reference, you can view the updated sample
Sample:
https://blazorplayground.syncfusion.com/htrJXuMuJPtylQuW
Regards,
Yohapuja S
No that's not my point.
The point is we need to display a value that is not in the DataSource.
This is working when the TItem is a class, but when it's a struct it stops working.
Regards.
Hi Julien Barach,
We have considered the reported issue " When using struct datasource, the custom value is not bind to the component" as a bug from our end, and the fix for the issue will be included in our upcoming weekly release which is expected to be scheduled on mid of October.
You can now track the status of the feedback through the below link,
Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”
Regards,
Yohapuja
Hi Riley,
We have included the fix for the issue “When using struct datasource, the custom value is not bind to the component" with our package version “27.1.55”. Therefore, we recommend upgrading to our latest version to resolve the current issue. Please find the updated sample below.
Rootcause:
The Struct data type was not handled when the allowCustomValue option was set
to true, which resulted in issues when attempting to add custom values. We have
now implemented logic to properly handle the Struct data type in cases where
allowCustomValue is enabled, ensuring custom values can be added without
issues.
Release notes: https://blazor.syncfusion.com/documentation/release-notes/27.1.55?type=all#combobox
Sample: https://blazorplayground.syncfusion.com/LXVJCjrVVCpjVqFC
Regards,
Yohapuja S