|
<SfMultiSelect CssClass="@CustomClass" DataSource="@LocalData" HideSelectedItem=false TItem="Games" TValue="string[]" @bind-Value="@BindingValue">
<MultiSelectFieldSettings
Text="Text" Value="ID"></MultiSelectFieldSettings>
<MultiSelectEvents
TItem="Games" TValue="string[]"
ValueChange="@ValueChangeHandler" Created="@CreatedHandler"></MultiSelectEvents>
</SfMultiSelect>
@code {
private List<string> ValidationErrors { get; set; } = new();
//preselect
the value
private string[] BindingValue { get; set; } = new string[] { "Game1", "Game4" };
private string CustomClass {get;set;}
public class Games
{
public string ID { get; set; }
public string Text { get; set; }
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Text= "American
Football" },
new Games() { ID= "Game2", Text= "Badminton" },
new Games() { ID= "Game3", Text= "Basketball" },
new Games() { ID= "Game4", Text= "Cricket" },
new Games() { ID= "Game5", Text= "Football" },
new Games() { ID= "Game6", Text= "Golf" },
new Games() { ID= "Game7", Text= "Hockey" },
new Games() { ID= "Game8", Text= "Rugby"},
new Games() { ID= "Game9", Text= "Snooker" },
new Games() { ID= "Game10", Text= "Tennis"},
};
private void ValueChangeHandler(MultiSelectChangeEventArgs<string[]> args)
{
//
Here you can customize your code
if (BindingValue != null &&
BindingValue.Length >0){
this.CustomClass = "e-color-green";
} else {
this.CustomClass = "";
}
}
private void CreatedHandler(Object args)
{
// Here you can customize your code
if (BindingValue != null &&
BindingValue.Length > 0)
{
this.CustomClass = "e-color-green";
}
else
{
this.CustomClass = "";
}
}
}
<style>
.e-multiselect.e-control-wrapper.e-input-group.e-color-green {
background-color: antiquewhite;
}
</style>
|
