We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Bindable Value

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.

1 Reply

GG Gopi Govindasamy Syncfusion Team June 20, 2019 08:23 AM UTC

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. 


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" } 
        }; 
} 


Regards, 
Gopi G. 


Loader.
Live Chat Icon For mobile
Up arrow icon