|
<div class="container-fluid">
<div class="col-4">
<SfMultiSelect @ref="formulaMultiSelect" TValue="int[]" TItem="TechnicalParameter" Placeholder="Define formula" DataSource="@technicalParameters" AllowCustomValue=true AllowFiltering="true" Mode="@VisualMode.Box">
<MultiSelectFieldSettings Text="Name" Value="ID" />
<MultiSelectEvents TValue="int[]" TItem="TechnicalParameter" OnChipTag="@OnChipTag" OnValueRemove="@OnValueRemove" CustomValueSpecifier="@CustomValueSpecifier" Filtering="@CustomFilter" />
<MultiSelectTemplates TItem="TechnicalParameter">
<NoRecordsTemplate>
<div>
<div id="nodata">No matched item, would you like to add it to the list as a new item?</div>
<SfButton id="btn" class="e-control e-btn custom-button" @onclick="@AddItem">Add New Item</SfButton>
</div>
</NoRecordsTemplate>
</MultiSelectTemplates>
</SfMultiSelect>
</div>
</div>
<style>
.e-chips.expression, .e-chips.expression:hover {
background-color: darkblue;
}
.e-chips.operator, .e-chips.operator:hover {
background-color: orange;
}
</style>
@code {
private SfMultiSelect<int[], TechnicalParameter>? formulaMultiSelect;
private int cloneId = 1000;
private string Custom { get; set; }
Random rnd = new Random();
private ObservableCollection<TechnicalParameter> technicalParameters = new ObservableCollection<TechnicalParameter>
{
new TechnicalParameter() { ID = 1, Name = "IntParam1", Description = "First int parameter", DataType = typeof(int).ToString(), Quantity = 15 },
new TechnicalParameter() { ID = 2, Name = "IntParam2", Description = "Second int parameter", DataType = typeof(int).ToString(), Quantity = 20 },
new TechnicalParameter() { ID = 3, Name = "+", Description = "+ operator", DataType = typeof(string).ToString(), Quantity = float.MinValue, IsOperator = true },
new TechnicalParameter() { ID = 4, Name = "-", Description = "- operator", DataType = typeof(string).ToString(), Quantity = float.MinValue, IsOperator = true }
};
private void CustomFilter(FilteringEventArgs args)
{
this.Custom = args.Text;
}
private async Task OnChipTag(TaggingEventArgs<TechnicalParameter> args)
{
args.SetClass = args.ItemData.IsOperator ? "operator" : "expression";
//await formulaMultiSelect.AddItemsAsync(new ObservableCollection<TechnicalParameter> { new TechnicalParameter() { ID = cloneId++, Name = args.ItemData.Name, Description = args.ItemData.Description , DataType = args.ItemData.DataType, Quantity = args.ItemData.Quantity, IsClone = true, IsOperator = args.ItemData.IsOperator }});
}
private void CustomValueSpecifier(CustomValueEventArgs<TechnicalParameter> args)
{
double res = 0;
// Allow only numeric values
if (!double.TryParse(args.Text, out res))
args.Cancel = true;
}
private async Task AddItem( Object sender)
{
var customData = new TechnicalParameter() { ID = rnd.Next(cloneId), Name = this.Custom };
await this.formulaMultiSelect.AddItems(new ObservableCollection<TechnicalParameter> { customData });
technicalParameters.Add(customData);
await this.formulaMultiSelect.HidePopupAsync();
}
private void OnValueRemove(RemoveEventArgs<TechnicalParameter> args)
{
if (args.ItemData.IsClone)
technicalParameters.Remove(args.ItemData);
}
private class TechnicalParameter
{
public int ID { get; set; }
public string? Name { get; set; }
public string? Description { get; set; }
public string? DataType { get; set; }
public float Quantity { get; set; }
public bool IsClone { get; set; }
public bool IsOperator {get; set; }
}
} | 
