Filtering customization in Blazor TreeGrid
18 Nov 201816 minutes to read
The appearance of filtering elements in the Blazor TreeGrid can be customized using CSS. Styling options are available for different parts of the filtering interface:
- Filter bar cell and input elements: Used to enter filter values directly in the header row.
- Input focus styles: Visual highlight applied when the filter input field is focused.
- Clear and filter icons: Icons for clearing filter values and indicating active filters in column headers.
- Filter dialog content and footer: Sections of the filter popup used for entering filter criteria and confirming actions.
- Input fields and buttons within the filter dialog: Controls used to specify filter values and apply or cancel filtering.
- Excel-style number filter visuals: Menu-style interface for selecting numeric filter conditions in Excel-like filtering mode.
Customize the filter bar cell element
The .e-filterbarcell class styles the filter bar cells in the header row. Use CSS to adjust its appearance:
.e-treegrid .e-filterbarcell {
background-color: #045fb4;
}Properties like background-color, padding, and border can be changed to visually distinguish the filter row from header cells.
Customize the filter bar input element
The .e-input class inside .e-filterbarcell styles the input field in the filter bar. Apply CSS to modify its look:
.e-treegrid .e-filterbarcell .e-input-group input.e-input {
font-family: cursive;
}Adjust properties such as font-family, font-size, and border can be adjusted to improve readability and match the TreeGrid design.
Customize the input focus
The .e-input-focus class styles the filter bar input group when focused. Apply CSS to change its appearance:
.e-treegrid .e-filterbarcell .e-input-group.e-input-focus {
background-color: #deecf9;
}Change properties like background-color and border to enhance focus visibility and support keyboard navigation.
Customize the filter bar input clear icon
The .e-clear-icon::before class defines the clear icon in the filter bar input. Apply CSS to change its appearance:
.e-treegrid .e-filterbarcell .e-input-group .e-clear-icon::before {
content: '\e72c';
}The content property can be updated to use a different glyph from the icon set.
@using Syncfusion.Blazor.TreeGrid
<SfTreeGrid DataSource="@TreeGridData"
IdMapping="TaskId"
ParentIdMapping="ParentId"
TreeColumnIndex="1"
AllowFiltering="true"
AllowPaging="true">
<TreeGridPageSettings PageSize="8"></TreeGridPageSettings>
<TreeGridColumns>
<TreeGridColumn Field=@nameof(TreeData.BusinessObject.TaskId) HeaderText="Task ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></TreeGridColumn>
<TreeGridColumn Field=@nameof(TreeData.BusinessObject.TaskName) HeaderText="Task Name" Width="120"></TreeGridColumn>
<TreeGridColumn Field=@nameof(TreeData.BusinessObject.Duration) HeaderText="Duration" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></TreeGridColumn>
<TreeGridColumn Field=@nameof(TreeData.BusinessObject.Progress) HeaderText="Progress" Width="100"></TreeGridColumn>
</TreeGridColumns>
</SfTreeGrid>
<style>
.e-treegrid .e-filterbarcell {
background-color: #045fb4;
color: #ffffff;
}
.e-treegrid .e-filterbarcell .e-input-group input.e-input {
font-family: cursive;
}
.e-treegrid .e-filterbarcell .e-input-group.e-input-focus {
background-color: #deecf9;
}
.e-treegrid .e-filterbarcell .e-input-group .e-clear-icon::before {
font-family: 'e-icons' !important;
font-weight: normal;
content: '\e72c';
}
/* Optional: highlight the focused filter cell for keyboard users */
.e-treegrid .e-filterbarcell:focus-visible {
outline: 2px solid #005a9e;
outline-offset: -2px;
}
</style>
@code {
private List<TreeData.BusinessObject> TreeGridData { get; set; }
protected override void OnInitialized()
{
TreeGridData = TreeData.GetSelfDataSource().ToList();
}
}namespace TreeGridComponent.Data
{
public class TreeData
{
public class BusinessObject
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public int? Duration { get; set; }
public int? Progress { get; set; }
public string Priority { get; set; }
public int? ParentId { get; set; }
}
internal static List<BusinessObject> GetSelfDataSource()
{
List<BusinessObject> BusinessObjectCollection = new List<BusinessObject>();
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 8, Progress = 80, Priority = "Low", ParentId = 1 });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Critical", ParentId = 2 });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 4, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 3 });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 5, TaskName = "Parent Task 2", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 6, TaskName = "Child task 1", Duration = 4, Progress = 80, Priority = "Critical", ParentId = 5 });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 7, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Low", ParentId = 5 });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 8, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 5 });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 9, TaskName = "Child task 4", Duration = 6, Progress = 77, Priority = "Low", ParentId = 5 });
return BusinessObjectCollection;
}
}
}Customize the filtering icon in the header
The .e-icon-filter::before class styles the filter icon in column headers. Apply CSS to modify its look:
.e-treegrid .e-icon-filter::before {
content: '\e81e';
}Update the content value to match the desired icon glyph.
Customize the filter dialog content
The .e-filter-popup .e-dlg-content class styles the content area of the filter dialog. Apply CSS to change its appearance:
.e-treegrid .e-filter-popup .e-dlg-content {
background-color: #deecf9;
}Modify properties such as background-color, padding, and border to match the application theme.
Customize the filter dialog footer
The .e-filter-popup .e-footer-content class styles the footer section of the filter dialog. Apply CSS to adjust its appearance:
.e-treegrid .e-filter-popup .e-footer-content {
background-color: #deecf9;
}Properties like background-color, text-align, and border can be changed to align with the layout design.
Customize the filter dialog input field
The .e-input class inside .e-filter-popup targets input fields in the filter dialog. Use CSS to adjust its appearance:
.e-treegrid .e-filter-popup .e-input-group input.e-input {
font-family: cursive;
}Adjust properties such as font-family, color, and border to improve clarity and consistency.
Customize the filter dialog button element
The .e-filter-popup .e-btn class styles buttons inside the filter dialog. Apply CSS to modify their appearance:
.e-treegrid .e-filter-popup .e-btn {
font-family: cursive;
}Change properties like font-family, background-color, and border to match the design.
Customize the Excel-style filter menu
The .e-contextmenu-container ul class inside .e-filter-popup styles the filter list in the Excel-style filter dialog. Apply CSS to change its appearance:
.e-treegrid .e-filter-popup .e-contextmenu-container ul {
background-color: #deecf9;
}Properties such as background-color, color, and text-align can be adjusted to match the required design.
@using Syncfusion.Blazor.TreeGrid
<SfTreeGrid DataSource="@TreeGridData"
IdMapping="TaskId"
ParentIdMapping="ParentId"
TreeColumnIndex="1"
AllowFiltering="true"
AllowPaging="true">
<TreeGridPageSettings PageSize="8"></TreeGridPageSettings>
<TreeGridFilterSettings Type="FilterType.Menu"></TreeGridFilterSettings>
<TreeGridColumns>
<TreeGridColumn Field=@nameof(TreeData.BusinessObject.TaskId) HeaderText="Task ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></TreeGridColumn>
<TreeGridColumn Field=@nameof(TreeData.BusinessObject.TaskName) HeaderText="Task Name" Width="120"></TreeGridColumn>
<TreeGridColumn Field=@nameof(TreeData.BusinessObject.Duration) HeaderText="Duration" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></TreeGridColumn>
<TreeGridColumn Field=@nameof(TreeData.BusinessObject.Progress) HeaderText="Progress" Width="100"></TreeGridColumn>
</TreeGridColumns>
</SfTreeGrid>
<style>
.e-treegrid .e-icon-filter::before {
font-family: 'e-icons' !important;
font-weight: normal;
content: '\e81e';
}
.e-treegrid .e-filter-popup .e-dlg-content,
.e-treegrid .e-filter-popup .e-footer-content,
.e-treegrid .e-filter-popup .e-contextmenu-container ul {
background-color: #deecf9;
}
.e-treegrid .e-filter-popup .e-input-group input.e-input,
.e-treegrid .e-filter-popup .e-btn {
font-family: cursive;
}
/* Optional: focus outline inside the filter dialog for keyboard users */
.e-treegrid .e-filter-popup .e-input-group input.e-input:focus-visible,
.e-treegrid .e-filter-popup .e-btn:focus-visible {
outline: 2px solid #005a9e;
outline-offset: 2px;
}
</style>
@code {
private List<TreeData.BusinessObject> TreeGridData { get; set; }
protected override void OnInitialized()
{
TreeGridData = TreeData.GetSelfDataSource().ToList();
}
}namespace TreeGridComponent.Data
{
public class TreeData
{
public class BusinessObject
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public int? Duration { get; set; }
public int? Progress { get; set; }
public string Priority { get; set; }
public int? ParentId { get; set; }
}
internal static List<BusinessObject> GetSelfDataSource()
{
List<BusinessObject> BusinessObjectCollection = new List<BusinessObject>();
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 8, Progress = 80, Priority = "Low", ParentId = 1 });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Critical", ParentId = 2 });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 4, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 3 });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 5, TaskName = "Parent Task 2", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 6, TaskName = "Child task 1", Duration = 4, Progress = 80, Priority = "Critical", ParentId = 5 });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 7, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Low", ParentId = 5 });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 8, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 5 });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 9, TaskName = "Child task 4", Duration = 6, Progress = 77, Priority = "Low", ParentId = 5 });
return BusinessObjectCollection;
}
}
}