Problem initializing/updating tags for MultiSelect Dropdown

[Henrik Johansson]

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

[Ponmani Murugaiyan]

Hi Henrik, 

We have validated your reported query. But unfortunately, we couldn’t reproduce the reported issue. With the first given code snippet, we have prepared sample and at initial loading, multiselect loads properly as expected. 

We couldn’t get the exact scenario of your reported issue. Please provide the below details to provide you the solution at earliest. 

1. Provide the issue reproducing sample.
2. Try to reproduce the issue in the given sample.
3. The specified case working as expected, so provide additional information about the query.

We have prepared sample with the provide code snippet. Please check with the test sample. If issue still exists in you end, provide the above details will be helpful to assists you further. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Multiselect-1836145936  

Regards, 

Ponmani M 

[Henrik Johansson]

Hi,

Thanks for the sample. I've scratched my head for while, stripped down my code the the bare minimum for the multiselect to work, but with no luck... Not until I moved the call to get tagSuggestions from my API service to after setting the selected tags! Maybe I'm doing async the wrong way? 

The problem is that I need to do an API call before setting the selected tags in order know which they are.

I was able to reproduce the problem by adding another service call with a 1 second delay in it. In my project I make two service calls: one to get the different available tags and one to get the object to edit in the view. Se attached solution.

Best regards,

Henrik Johansson

Attachment: Multiselect1836145936modified_8f5eabdc.zip

[Ponmani Murugaiyan]

Hello Henrik, 

 

Sorry for the inconvenience caused. 

 

Case1: Maybe I'm doing async the wrong way. 

 

We have validated the reported issue. No, the way of async is properly working as expected in your end. 

 

Case2: I was able to reproduce the problem by adding another service call with a 1 second delay in it. 

 

We have validated your reported issue. With the provided sample, we couldn’t reproduce the issue from our end. We have taken video demonstration for your reference. Please find the video below and if we misunderstood your query, please provide the video demonstration of issue reproducing sample. Will help us to provide you the solution at earliest. 

 

Video:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScreenCapture_24-04-2020_6.53.24_AM.mp4-1549301484  

 

Regards, 

Ponmani M

[Henrik Johansson]

Hi,

I'd say you have reproduced the problem! In the solution I sent you the expected output is a multiselect input pre-populated with two tags "tag1" and "othertag". I don't see that in the capture you sent so it's not working on your side either.

Kind regards,

Henrik Johansson

[Ponmani Murugaiyan]

Hello Henrik, 

 

We suspect that your requirement is to set the preselected value to the multiselect component. Please find the code snippet video demonstration for output and test sample below for reference. 

 

[Index.razor] 

 

<SfMultiSelect TValue="List<string>" Placeholder="t.ex. vegetariskt" Mode="VisualMode.Box" 

               DataSource="@country" CssClass="col-md-4" 

               AllowFiltering="true" AllowCustomValue="true" Value="@MultiVal" MaximumSelectionLength="5"> 

    <MultiSelectFieldSettings Value="CountryId" Text="CountryName"></MultiSelectFieldSettings> 

    <MultiSelectEvents TValue="List<string>" OnChipTag="@OnTagging" /> 

</SfMultiSelect> 

 

@code { 

 

    public List<string> MultiVal { get; set; } = new List<string> { "1" , "3" }; 

    public List<Countries> country = new List<Countries>(); 

    public List<string> selectedTags = new List<string>(); 

    public Data myDataItem = null; 

 

    protected override async Task OnInitializedAsync() 

    { 

        country = await Countries.GetAllRecords(); 

    } 

 

    protected void OnTagging(TaggingEventArgs args) 

    { 

        System.Diagnostics.Debug.WriteLine($"OnTagging() -- selectedTags: {string.Join(',', selectedTags)}"); 

    } 

 

} 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Multiselect-2054359450  

 

Video demonstration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScreenCapture_27-04-2020_4.22.53_PM.mp4-1868441145  

 

Kindly check with the above sample and video demonstration. If you need further assistances, please get back us. 

 

 

Regards, 

Ponmani M