Hello, I need to implement MultiSelect with templates. Everything work but when I try to add @bind-Value="@Tags" to the code the dropdown is blank. I tried to implement custom CustomAdaptor and mock data inside this class but does not help me. Please help me resolve this an issue.
<EjsMultiSelect TValue="string[]" @bind-Value="@Tags" ModelType="@Model" Placeholder="Select a customer" DataSource="@Data1">
<MultiSelectTemplates>
<ItemTemplate>
<span class='item'>
<span class='name'>@((context as Tag).Name)</span>
<span class='value'>@((context as Tag).Value)</span>
</span>
</ItemTemplate>
<HeaderTemplate>
<span class='head'>
<span class='name'>Name</span>
<span class='value'>Value</span>
</span>
</HeaderTemplate>
</MultiSelectTemplates>
<MultiSelectEvents TValue="string[]" ValueChange="OnChange"></MultiSelectEvents>
<EjsDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor" CrossDomain=true></EjsDataManager>
<MultiSelectFieldSettings Value="Value" Text="Name"></MultiSelectFieldSettings>
</EjsMultiSelect>
//--------------------------------------------------------------------
public class Tag
{
public string Name { get; set; }
public string Value { get; set; }
}
public string[] Tags = new string[] { };
//---------------------------------------------------------------------
protected async Task OnChange(MultiSelectChangeEventArgs<string[]> args)
{
Tags = args.Value;
StateHasChanged();
}
//---------------------------------------------------------------
protected override async Task OnInitializedAsync()
{
Tags = new string[]{ "TagValue1" };
}
//---------------------my data-------------------------
public List<Tag> Data1 = new List<Tag>()
{
new Tag()
{
Name = "TagName1",
Value = "TagValue1"
},
new Tag()
{
Name = "TagName2",
Value = "TagValue2"
},
new Tag()
{
Name = "TagName3",
Value = "TagValue3"
}
};
public Tag Model = new Tag();
}
//----------------------------------------------------
public class CustomAdaptor : DataAdaptor
{
public static List<Tag> order = new List<Tag>()
{
new Tag()
{
Name = "TagName1",
Value = "TagValue1"
},
new Tag()
{
Name = "TagName2",
Value = "TagValue2"
},
new Tag()
{
Name = "TagName3",
Value = "TagValue3"
}
};
public override object Read(DataManagerRequest dm, string key = null)
{
IEnumerable<Tag> dataSource = order;
if (dm.Search != null && dm.Search.Count > 0)
{
dataSource = DataOperations.PerformSearching(dataSource, dm.Search); //Search
}
if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting
{
dataSource = DataOperations.PerformSorting(dataSource, dm.Sorted);
}
if (dm.Where != null && dm.Where.Count > 0) //Filtering
{
dataSource = DataOperations.PerformFiltering(dataSource, dm.Where, dm.Where[0].Operator);
}
int count = dataSource.Cast<Tag>().Count();
if (dm.Skip != 0)
{
dataSource = DataOperations.PerformSkip(dataSource, dm.Skip); //Paging
}
if (dm.Take != 0)
{
dataSource = DataOperations.PerformTake(dataSource, dm.Take);
}
if (dm.Where != null && dm.Where.Count > 0) //Filtering
{
dataSource = DataOperations.PerformTake(dataSource, 1);
}
return dm.RequiresCounts ? new DataResult() { Result = dataSource, Count = count } : (object)dataSource;
}}
