Bindable Value

[Filip Stepanek]

Hey, I would like to ask, if it is possible to make multiselect dropdown control value bindable. I was unsuccessfull doing that.

It's working when I add initial value to control, but when changes are made through webpage, they're not propagated to Value property. Using bind-value I wasn't able to compile.

Use case:

<EjsMultiSelect id="someId" value="@Value" PlaceHolder="Some place holder" DataSource="@localdata">

    <MultiSelectFieldSettings text="Name" value="Key"></MultiSelectFieldSettings>

</EjsMultiSelect>

@code{

public string[] Value {get; set;}

...

}

I'm using latest preview-6 and preview-6 compatible version.

Thank you in advance.

[Gopi Govindasamy]

Hi Filip Stepanek,  

Greetings from Syncfusion. 

The reported issue ("bind-value not working."), is due to the two way binding name (Blazor directive attributes) change with blazor updates in .NET Core 3.0 Preview6. So you can use the @bind-value in multiselect component. Please find the blogs for preview 6 what’s new document. 

https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-6/  

We have checked your shared code and Value property is set as string[] datatypes. But the datatype of Multiselect component Value property is an object type, since we have provided support to pass multiple types of value to Value property. 

Please find the code snippet for your reference.  

<p>bind value: @Value</p> 

 

<EjsMultiSelect id="someId" @bind-value="@Value" PlaceHolder="Some place holder" DataSource="@localdata"> 

    <MultiSelectFieldSettings Text="Name" Value="Key"></MultiSelectFieldSettings> 

</EjsMultiSelect> 

 

@code{ 

 

    public object Value {get; set;} 

 

    public class games 

    { 

        public string Key { get; set; } 

        public string Name { get; set; } 

    } 

 

    List<games> 

    localdata = new List<games> 

        { 

        new games() { Key= "Game1", Name= "American Football" }, 

        new games() { Key= "Game2", Name= "Badminton" }, 

        new games() { Key= "Game3", Name= "Basketball" }, 

        new games() { Key= "Game4", Name= "Cricket" }, 

        new games() { Key= "Game5", Name= "Football" } 

        }; 

} 

Sample Link: http://www.syncfusion.com/downloads/support/forum/145379/ze/WebApplication2-1233568466  

Regards, 

Gopi G.