blazor-devexpress-dot-blazor-dot-dxtreelist-d28fd9aa.md
Allows you to customize column filter menu items.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[Parameter]
public Action<TreeListCustomizeFilterMenuEventArgs> CustomizeFilterMenu { get; set; }
| Type | Description |
|---|---|
| TreeListCustomizeFilterMenuEventArgs |
An object that contains data for this event.
|
When a user clicks a column filter menu button, the TreeList creates a list of default filter items to populate the drop-down window. The CustomizeFilterMenu event fires before the window appears and allows you to customize the list.
Use the DataItems event argument to access the list of filter menu items. Each item contains a column value and its display text.
You can customize, add, remove, or rearrange items. Note that items cannot store filter criteria as values. To implement complex filter criteria, create a filter menu template. For additional information, refer to the following topic: Custom Filter Menu Content.
The following example adds progress values to task captions:
<DxTreeList Data="Data"
KeyFieldName="Id"
ParentKeyFieldName="ParentId"
FilterMenuButtonDisplayMode="TreeListFilterMenuButtonDisplayMode.Always"
CustomizeFilterMenu="TreeList_CustomizeFilterMenu"
CssClass="max-h-480">
<Columns>
<DxTreeListDataColumn FieldName="Name" Caption="Task" />
<DxTreeListDataColumn FieldName="EmployeeName" Caption="Assigned To" TextAlignment="TreeListTextAlignment.Left" />
<DxTreeListDataColumn FieldName="StartDate" Width="150px" />
<DxTreeListDataColumn FieldName="DueDate" Width="150px" />
</Columns>
</DxTreeList>
@code {
List<EmployeeTask> Data { get; set; }
void TreeList_CustomizeFilterMenu(TreeListCustomizeFilterMenuEventArgs e) {
if (e.DataColumn.FieldName == "Name") {
e.DataItems.ForEach(di => {
var status = Data.FirstOrDefault(c => c.Name == (string)di.Value)?.Status;
di.DisplayText += " (" + status + "%)";
});
}
}
}
using System;
using System.ComponentModel.DataAnnotations;
using BlazorDemo.Data.Annotations;
namespace BlazorDemo.Data {
public class EmployeeTask {
public int Id { get; set; }
public int ParentId { get; set; }
[Required(ErrorMessage = "The Task field is required")]
public string Name { get; set; }
public string EmployeeName { get; set; }
[DateIsEarlierThan("DueDate")]
[Range(typeof(DateTime), "01/01/2017", "01/01/2027", ErrorMessage = "{0} must be between {1:d} and {2:d}")]
public DateTime StartDate { get; set; }
[Range(typeof(DateTime), "01/01/2017", "01/01/2027", ErrorMessage = "{0} must be between {1:d} and {2:d}")]
public DateTime DueDate { get; set; }
public int Priority { get; set; }
public int Status { get; set; }
public string Description { get; set; }
public bool HasChildren { get; set; }
public bool HasDescription => !string.IsNullOrEmpty(Description);
public bool IsCompleted => Status == 100;
public EmployeeTask(
int id,
int parentId,
string name,
string employeeName,
string startDate,
string dueDate,
int priority,
int status,
string description,
bool hasChildren = false
) : this() {
Id = id;
ParentId = parentId;
Name = name;
EmployeeName = employeeName;
StartDate = DateTime.Parse(startDate);
DueDate = DateTime.Parse(dueDate);
Status = status;
Priority = priority;
Description = description;
HasChildren = hasChildren;
}
public EmployeeTask() { }
public EmployeeTask Clone() {
return (EmployeeTask)MemberwiseClone();
}
}
}
See Also