When i change the DataSource behind a Multiselect which has SelectedValues, i got a Javascript Error

[Thomas Schinagl]

My code looks like the following:

When the change event of the textbox triggers with value "foo", the new DataSource would be added and this javascript error is produced:

Please help

[Berly Christopher]

Hi Thomas, 

 

Greetings from Syncfusion support. 

 

While checking the provided code, we could not reproduce the reported issue at our end. So, we have prepared the sample and attached it below.  

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/151155/ze/Syncfusion_MultiSelect_151155-1236793811  

  

Also, currently, we don’t have a list of string data source support for the MultiSelect component for a search action. So as of now, you can convert the string array to list type for your application requirement. We considered it as a feature and it will be included in the upcoming Volume 1 Main release which is expected to be rolled out on end of March 2020. 

  

Feedback Link: https://www.syncfusion.com/feedback/11750/  

 

Regards, 

Berly B.C 

[Thomas Schinagl]

Thanks for your Sample. I get the exact same error with your code:

Reproduce:

Selecte an Item -> Type in "foo" in the Textbox

I dont use List<string> in the real application, but i want to create a simple sample

[Sureshkumar P]

Hi Thomas, 

 

We have validated your requirement and we suggest you make the component value Null before setting the data source dynamically to get rid of your facing issue. Please refer to the below code example. 

 

<EjsMultiSelect @ref="@multiObj" TValue="List<string>" @bind-Value="@MultiSelectID" DataSource="@DataList" 

    Mode="VisualMode.Box" Placeholder="Enter the value" AllowFiltering=true FilterType="FilterType.Contains" 

    FloatLabelType="FloatLabelType.Auto"> 

    <MultiSelectEvents TValue="List<string>" ValueChange="@(e => MultiSelectID = e.Value)"></MultiSelectEvents> 

</EjsMultiSelect> 

 

@code{ 

 

public string TxtValue { 

         get { return _txtVal; } 

         set { 

            if (value == "foo") { 

                MultiSelectID = null; 

                DataList = new ObservableCollection<string> { "Four", "Five" }; 

             } 

             _txtVal = value; 

             } 

         } 

    } 

 

 

Please find the modified sample from the below link. 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/151155/ze/Syncfusion_MultiSelect_151155_modified-928681029  

 

Regards, 

Sureshkumar P