Problem initializing/updating tags for MultiSelect Dropdown
Version 1
This code results in an empty multiselect input when loading the page. Adding chips works though and selectedTags is populated.
.razor:
<SfMultiSelect TValue="List<string>" Placeholder="t.ex. vegetariskt" Mode="VisualMode.Box"
DataSource="@tagSuggestions" @bind-Value="@selectedTags" CssClass="col-md-4"
AllowFiltering="true" AllowCustomValue="true" MaximumSelectionLength="5">
<MultiSelectFieldSettings Value="Name" Text="Name"></MultiSelectFieldSettings>
<MultiSelectEvents TValue="List<string>" OnChipTag="@OnTagging"/>
</SfMultiSelect>
@ code {
public List<string> selectedTags = new List<string>();
public IEnumerable<Tag> tagSuggestions;
public MealDTO meal = new MealDTO();
protected override async Task OnInitializedAsync()
{
tagSuggestions = await DataService.GetTags(); // {"tag1","tag2","tag3","tag4",...}
meal = await MealDataService.GetMealDetails(MealId);
}
protected override Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender && meal?.Tags != null)
{
selectedTags.AddRange(meal.Tags); //meal.Tags is e.g. {"tag1","tag2"}
}
return base.OnAfterRenderAsync(firstRender);
}
protected void OnTagging(TaggingEventArgs args)
{
System.Diagnostics.Debug.WriteLine($"OnTagging() -- selectedTags: {string.Join(',', selectedTags)}");
}
public class Tag
{
public string Name { get; set; }
private Tag() { }
public Tag(string name) { Name = name; }
}
}
Version 2
This code populates the multiselect input when loading the page. Adding chips does not update selectedTags, unless "meals.Tags" is empty when loading.
.razor:
<SfMultiSelect TValue="string[]" Placeholder="t.ex. vegetariskt" Mode="VisualMode.Box"
DataSource="@tagSuggestions" @bind-Value="@selectedTags" CssClass="col-md-4"
AllowFiltering="true" AllowCustomValue="true" MaximumSelectionLength="5">
<MultiSelectFieldSettings Value="Name" Text="Name"></MultiSelectFieldSettings>
<MultiSelectEvents TValue="string[]" OnChipTag="@OnTagging"/>
</SfMultiSelect>
@ code {
public string[] selectedTags = System.Array.Empty<string>();
public IEnumerable<Tag> tagSuggestions;
public MealDTO meal = new MealDTO();
protected override async Task OnInitializedAsync()
{
tagSuggestions = await MealDataService.GetDistinctTags(); //{"tag1","tag2","tag3","tag4",...}
meal = await MealDataService.GetMealDetails(MealId);
if (meal?.Tags != null)
{
selectedTags = meal.Tags.ToArray(); //meal.Tags is e.g. {"tag1","tag2"}
}
}
protected void OnTagging(TaggingEventArgs args)
{
System.Diagnostics.Debug.WriteLine($"OnTagging() -- selectedTags: {string.Join(',', selectedTags)}"); //Outputs value of meal.Tags no matter which tag is added
}
public class Tag
{
public string Name { get; set; }
private Tag() { }
public Tag(string name) { Name = name; }
}
}
So, how do I get the combination where the field is populated properly when loaded AND the selectedTags array is updated whenever a tag is added?
Best regards,
Henrik Johansson
SIGN IN To post a reply.
7 Replies
Hi, I have a similar problem
But Im using a Custom Data Adaptor
I have changed the sample you attached to use a Custom Data Adaptor (most simple possible)
I've also updated to dotnet 9 and version 29.2.11 of syncfusion
Im using the same multiselect but with the DataManager
Here in the first load you can see the first problem, the component renders as if everythihng is selected
If you delete at least one and click into the MultiSelect, it wil show a List of ALL itens, while it should shows only the deleted one
Ive attached the project sample
Attachment: MultiselectInitialValuesProblem_540f9e56.7z
SIGN IN To post a reply.
