TelerikCombobox用于在itemtemplate中搜索blazor

Question

我有一个启用了过滤器选项的电话信箱。我添加了itemtemplate用于在文本字段中显示id和值。我想过滤包含当用户在下拉框中键入。

下面是我试过的代码

<TelerikComboBox Data="@CostCenters"
Filterable="true" FilterOperator="@filterOperator"
Placeholder="Find cost center by typing"
@bind-Value="@SelectedCostCenter1" TextField="CostCenterName" ValueField="CostCenterId">

<ItemTemplate Context="employeeItem">
@( (employeeItem as CostCenter).CostCenterId)  @((employeeItem as CostCenter).CostCenterName)
</ItemTemplate>
</TelerikComboBox>

但是上面的代码只是按名称

进行过滤

Answer 1

内置过滤作用于文本(引用)，所以如果您想通过多个字段进行过滤，您应该使用OnRead事件并根据需要处理过滤。重要的是要注意，contains过滤器只对字符串有意义，所以你不太可能用它来过滤id，因为它们通常是数字或guids。

无论如何，这里有一个如何根据需要过滤数据的示例-在这个示例中-通过ID和字符串文本:

@SelectedValue
<br />
<TelerikComboBox Data="@CurrentOptions"
OnRead=@ReadItems
Filterable="true"
Placeholder="Find a car by typing part of its make"
@bind-Value="@SelectedValue" ValueField="Id" TextField="Make">
</TelerikComboBox>
@code {
public int? SelectedValue { get; set; }
List<Car> AllOptions { get; set; }
List<Car> CurrentOptions { get; set; }
protected async Task ReadItems(ComboBoxReadEventArgs args)
{
if (args.Request.Filters.Count > 0)
{
Telerik.DataSource.FilterDescriptor filter = args.Request.Filters[0] as Telerik.DataSource.FilterDescriptor;
string userInput = filter.Value.ToString();
string method = filter.Operator.ToString(); // you can also pass that along if you need to
CurrentOptions = await GetFilteredData(userInput);
}
else
{
CurrentOptions = await GetFilteredData(string.Empty);
}
}
// in a real case that would be a service method
public async Task<List<Car>> GetFilteredData(string filterText)
{
//generate the big data source that we want to narrow down for the user
//in a real case you would probably have fetched it from a database
if (AllOptions == null)
{
AllOptions = new List<Car>
{
new Car { Id = 1, Make = "Honda" },
new Car { Id = 2, Make = "Opel" },
new Car { Id = 3, Make = "Audi" },
new Car { Id = 4, Make = "Lancia" },
new Car { Id = 5, Make = "BMW" },
new Car { Id = 6, Make = "Mercedes" },
new Car { Id = 7, Make = "Tesla" },
new Car { Id = 8, Make = "Vw" },
new Car { Id = 9, Make = "Alpha Romeo" },
new Car { Id = 10, Make = "Chevrolet" },
new Car { Id = 11, Make = "Ford" },
new Car { Id = 12, Make = "Cadillac" },
new Car { Id = 13, Make = "Dodge" },
new Car { Id = 14, Make = "Jeep" },
new Car { Id = 15, Make = "Chrysler" },
new Car { Id = 16, Make = "Lincoln" }
};
}
if (string.IsNullOrEmpty(filterText))
{
return await Task.FromResult(AllOptions);
}
var filteredData = AllOptions.Where(c => c.Make.ToLowerInvariant().Contains(filterText.ToLowerInvariant()));
// here's an attempt to also filter by ID based on a string, implement this as needed
int id;
if (int.TryParse(filterText, out id))
{
var filteredById = AllOptions.Where(c => c.Id.ToString().Contains(filterText));
filteredData = filteredData.Union(filteredById);
}
return await Task.FromResult(filteredData.ToList());
}
public class Car
{
public int Id { get; set; }
public string Make { get; set; }
}
}