AppStd/DbFirst
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance grid filter UI with custom editors for each type

Browse Source 
Replaced default filter row editors with custom templates in CatalogsGrid and MassDataGrid. Added DxTextBox for text fields, DxDateEdit for date fields, and a DxComboBox for boolean status filtering. Introduced BoolFilterOption class to support the status dropdown. These changes improve filter usability and data type handling.
This commit is contained in:
OlgunR
2026-02-05 11:37:06 +01:00
parent 05ea47f42c
commit 9bbe34dece
4 changed files with 152 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
DbFirst.BlazorWasm/Components/CatalogsGrid.razor
View File

@@ -83,13 +83,55 @@ else
DataItemDeleting="OnDataItemDeleting"> DataItemDeleting="OnDataItemDeleting">
<Columns> <Columns>
<DxGridCommandColumn Width="120px" /> <DxGridCommandColumn Width="120px" />
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.Guid)" Caption="Id" Width="140px" SortIndex="0" SortOrder="GridColumnSortOrder.Ascending" /> <DxGridDataColumn FieldName="@nameof(CatalogReadDto.Guid)" Caption="Id" Width="140px" SortIndex="0" SortOrder="GridColumnSortOrder.Ascending">
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatTitle)" Caption="Titel" /> <FilterRowCellTemplate Context="filter">
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatString)" Caption="String" /> <DxTextBox Text="@(filter.FilterRowValue?.ToString())"
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWho)" Caption="Angelegt von" ReadOnly="true" /> TextChanged="@(value => filter.FilterRowValue = value)"
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWhen)" Caption="Angelegt am" ReadOnly="true" /> CssClass="filter-search-input" />
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWho)" Caption="Geändert von" ReadOnly="true" /> </FilterRowCellTemplate>
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWhen)" Caption="Geändert am" ReadOnly="true" /> </DxGridDataColumn>
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatTitle)" Caption="Titel">
<FilterRowCellTemplate Context="filter">
<DxTextBox Text="@(filter.FilterRowValue as string)"
TextChanged="@(value => filter.FilterRowValue = value)"
CssClass="filter-search-input" />
</FilterRowCellTemplate>
</DxGridDataColumn>
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatString)" Caption="String">
<FilterRowCellTemplate Context="filter">
<DxTextBox Text="@(filter.FilterRowValue as string)"
TextChanged="@(value => filter.FilterRowValue = value)"
CssClass="filter-search-input" />
</FilterRowCellTemplate>
</DxGridDataColumn>
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWho)" Caption="Angelegt von" ReadOnly="true">
<FilterRowCellTemplate Context="filter">
<DxTextBox Text="@(filter.FilterRowValue as string)"
TextChanged="@(value => filter.FilterRowValue = value)"
CssClass="filter-search-input" />
</FilterRowCellTemplate>
</DxGridDataColumn>
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWhen)" Caption="Angelegt am" ReadOnly="true">
<FilterRowCellTemplate Context="filter">
<DxDateEdit Date="@((DateTime?)filter.FilterRowValue)"
DateChanged="@((DateTime? value) => filter.FilterRowValue = value)"
Width="100%" />
</FilterRowCellTemplate>
</DxGridDataColumn>
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWho)" Caption="Geändert von" ReadOnly="true">
<FilterRowCellTemplate Context="filter">
<DxTextBox Text="@(filter.FilterRowValue as string)"
TextChanged="@(value => filter.FilterRowValue = value)"
CssClass="filter-search-input" />
</FilterRowCellTemplate>
</DxGridDataColumn>
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWhen)" Caption="Geändert am" ReadOnly="true">
<FilterRowCellTemplate Context="filter">
<DxDateEdit Date="@((DateTime?)filter.FilterRowValue)"
DateChanged="@((DateTime? value) => filter.FilterRowValue = value)"
Width="100%" />
</FilterRowCellTemplate>
</DxGridDataColumn>
</Columns> </Columns>
<EditFormTemplate Context="editFormContext"> <EditFormTemplate Context="editFormContext">
@{ SetEditContext(editFormContext.EditContext); var editModel = (CatalogEditModel)editFormContext.EditModel; } @{ SetEditContext(editFormContext.EditContext); var editModel = (CatalogEditModel)editFormContext.EditModel; }

36
DbFirst.BlazorWasm/Components/MassDataGrid.razor
View File

@@ -116,23 +116,28 @@ else
</DxGridDataColumn> </DxGridDataColumn>
<DxGridDataColumn FieldName="@nameof(MassDataReadDto.StatusFlag)" Caption="Status" ReadOnly="true"> <DxGridDataColumn FieldName="@nameof(MassDataReadDto.StatusFlag)" Caption="Status" ReadOnly="true">
<FilterRowCellTemplate Context="filter"> <FilterRowCellTemplate Context="filter">
<DxTextBox Text="@(filter.FilterRowValue?.ToString())" <DxComboBox Data="@statusFilterOptions"
TextChanged="@(value => filter.FilterRowValue = value)" TData="BoolFilterOption"
CssClass="filter-search-input" /> TValue="bool?"
TextFieldName="Text"
ValueFieldName="Value"
Value="@(filter.FilterRowValue as bool?)"
ValueChanged="@(value => filter.FilterRowValue = value)"
Width="100%" />
</FilterRowCellTemplate> </FilterRowCellTemplate>
</DxGridDataColumn> </DxGridDataColumn>
<DxGridDataColumn FieldName="@nameof(MassDataReadDto.AddedWhen)" Caption="Added" ReadOnly="true"> <DxGridDataColumn FieldName="@nameof(MassDataReadDto.AddedWhen)" Caption="Added" ReadOnly="true">
<FilterRowCellTemplate Context="filter"> <FilterRowCellTemplate Context="filter">
<DxTextBox Text="@(filter.FilterRowValue?.ToString())" <DxDateEdit Date="@((DateTime?)filter.FilterRowValue)"
TextChanged="@(value => filter.FilterRowValue = value)" DateChanged="@((DateTime? value) => filter.FilterRowValue = value)"
CssClass="filter-search-input" /> Width="100%" />
</FilterRowCellTemplate> </FilterRowCellTemplate>
</DxGridDataColumn> </DxGridDataColumn>
<DxGridDataColumn FieldName="@nameof(MassDataReadDto.ChangedWhen)" Caption="Changed" ReadOnly="true"> <DxGridDataColumn FieldName="@nameof(MassDataReadDto.ChangedWhen)" Caption="Changed" ReadOnly="true">
<FilterRowCellTemplate Context="filter"> <FilterRowCellTemplate Context="filter">
<DxTextBox Text="@(filter.FilterRowValue?.ToString())" <DxDateEdit Date="@((DateTime?)filter.FilterRowValue)"
TextChanged="@(value => filter.FilterRowValue = value)" DateChanged="@((DateTime? value) => filter.FilterRowValue = value)"
CssClass="filter-search-input" /> Width="100%" />
</FilterRowCellTemplate> </FilterRowCellTemplate>
</DxGridDataColumn> </DxGridDataColumn>
</Columns> </Columns>
@@ -169,6 +174,13 @@ else
private int pageIndex; private int pageIndex;
private int pageCount = 1; private int pageCount = 1;
private readonly List<BoolFilterOption> statusFilterOptions = new()
{
new() { Value = null, Text = "Alle" },
new() { Value = true, Text = "True" },
new() { Value = false, Text = "False" }
};
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
{ {
await LoadPage(0); await LoadPage(0);
@@ -237,4 +249,10 @@ else
e.Cancel = true; e.Cancel = true;
return Task.CompletedTask; return Task.CompletedTask;
} }
private sealed class BoolFilterOption
{
public bool? Value { get; set; }
public string Text { get; set; } = string.Empty;
}
} }

56
DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
View File

@@ -42,13 +42,55 @@ else
DataItemDeleting="OnDataItemDeleting"> DataItemDeleting="OnDataItemDeleting">
<Columns> <Columns>
<DxGridCommandColumn Width="120px" /> <DxGridCommandColumn Width="120px" />
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.Guid)" Caption="Id" Width="140px" SortIndex="0" SortOrder="GridColumnSortOrder.Ascending" /> <DxGridDataColumn FieldName="@nameof(CatalogReadDto.Guid)" Caption="Id" Width="140px" SortIndex="0" SortOrder="GridColumnSortOrder.Ascending">
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatTitle)" Caption="Titel" /> <FilterRowCellTemplate Context="filter">
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatString)" Caption="String" /> <DxTextBox Text="@(filter.FilterRowValue?.ToString())"
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWho)" Caption="Angelegt von" ReadOnly="true" /> TextChanged="@(value => filter.FilterRowValue = value)"
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWhen)" Caption="Angelegt am" ReadOnly="true" /> CssClass="filter-search-input" />
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWho)" Caption="Geändert von" ReadOnly="true" /> </FilterRowCellTemplate>
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWhen)" Caption="Geändert am" ReadOnly="true" /> </DxGridDataColumn>
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatTitle)" Caption="Titel">
<FilterRowCellTemplate Context="filter">
<DxTextBox Text="@(filter.FilterRowValue as string)"
TextChanged="@(value => filter.FilterRowValue = value)"
CssClass="filter-search-input" />
</FilterRowCellTemplate>
</DxGridDataColumn>
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatString)" Caption="String">
<FilterRowCellTemplate Context="filter">
<DxTextBox Text="@(filter.FilterRowValue as string)"
TextChanged="@(value => filter.FilterRowValue = value)"
CssClass="filter-search-input" />
</FilterRowCellTemplate>
</DxGridDataColumn>
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWho)" Caption="Angelegt von" ReadOnly="true">
<FilterRowCellTemplate Context="filter">
<DxTextBox Text="@(filter.FilterRowValue as string)"
TextChanged="@(value => filter.FilterRowValue = value)"
CssClass="filter-search-input" />
</FilterRowCellTemplate>
</DxGridDataColumn>
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWhen)" Caption="Angelegt am" ReadOnly="true">
<FilterRowCellTemplate Context="filter">
<DxDateEdit Date="@((DateTime?)filter.FilterRowValue)"
DateChanged="@((DateTime? value) => filter.FilterRowValue = value)"
Width="100%" />
</FilterRowCellTemplate>
</DxGridDataColumn>
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWho)" Caption="Geändert von" ReadOnly="true">
<FilterRowCellTemplate Context="filter">
<DxTextBox Text="@(filter.FilterRowValue as string)"
TextChanged="@(value => filter.FilterRowValue = value)"
CssClass="filter-search-input" />
</FilterRowCellTemplate>
</DxGridDataColumn>
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWhen)" Caption="Geändert am" ReadOnly="true">
<FilterRowCellTemplate Context="filter">
<DxDateEdit Date="@((DateTime?)filter.FilterRowValue)"
DateChanged="@((DateTime? value) => filter.FilterRowValue = value)"
Width="100%" />
</FilterRowCellTemplate>
</DxGridDataColumn>
</Columns> </Columns>
<EditFormTemplate Context="editFormContext"> <EditFormTemplate Context="editFormContext">
@{ SetEditContext(editFormContext.EditContext); var editModel = (CatalogEditModel)editFormContext.EditModel; } @{ SetEditContext(editFormContext.EditContext); var editModel = (CatalogEditModel)editFormContext.EditModel; }

36
DbFirst.BlazorWebApp/Components/MassDataGrid.razor
View File

@@ -116,23 +116,28 @@ else
</DxGridDataColumn> </DxGridDataColumn>
<DxGridDataColumn FieldName="@nameof(MassDataReadDto.StatusFlag)" Caption="Status" ReadOnly="true"> <DxGridDataColumn FieldName="@nameof(MassDataReadDto.StatusFlag)" Caption="Status" ReadOnly="true">
<FilterRowCellTemplate Context="filter"> <FilterRowCellTemplate Context="filter">
<DxTextBox Text="@(filter.FilterRowValue?.ToString())" <DxComboBox Data="@statusFilterOptions"
TextChanged="@(value => filter.FilterRowValue = value)" TData="BoolFilterOption"
CssClass="filter-search-input" /> TValue="bool?"
TextFieldName="Text"
ValueFieldName="Value"
Value="@(filter.FilterRowValue as bool?)"
ValueChanged="@(value => filter.FilterRowValue = value)"
Width="100%" />
</FilterRowCellTemplate> </FilterRowCellTemplate>
</DxGridDataColumn> </DxGridDataColumn>
<DxGridDataColumn FieldName="@nameof(MassDataReadDto.AddedWhen)" Caption="Added" ReadOnly="true"> <DxGridDataColumn FieldName="@nameof(MassDataReadDto.AddedWhen)" Caption="Added" ReadOnly="true">
<FilterRowCellTemplate Context="filter"> <FilterRowCellTemplate Context="filter">
<DxTextBox Text="@(filter.FilterRowValue?.ToString())" <DxDateEdit Date="@((DateTime?)filter.FilterRowValue)"
TextChanged="@(value => filter.FilterRowValue = value)" DateChanged="@((DateTime? value) => filter.FilterRowValue = value)"
CssClass="filter-search-input" /> Width="100%" />
</FilterRowCellTemplate> </FilterRowCellTemplate>
</DxGridDataColumn> </DxGridDataColumn>
<DxGridDataColumn FieldName="@nameof(MassDataReadDto.ChangedWhen)" Caption="Changed" ReadOnly="true"> <DxGridDataColumn FieldName="@nameof(MassDataReadDto.ChangedWhen)" Caption="Changed" ReadOnly="true">
<FilterRowCellTemplate Context="filter"> <FilterRowCellTemplate Context="filter">
<DxTextBox Text="@(filter.FilterRowValue?.ToString())" <DxDateEdit Date="@((DateTime?)filter.FilterRowValue)"
TextChanged="@(value => filter.FilterRowValue = value)" DateChanged="@((DateTime? value) => filter.FilterRowValue = value)"
CssClass="filter-search-input" /> Width="100%" />
</FilterRowCellTemplate> </FilterRowCellTemplate>
</DxGridDataColumn> </DxGridDataColumn>
</Columns> </Columns>
@@ -169,6 +174,13 @@ else
private int pageIndex; private int pageIndex;
private int pageCount = 1; private int pageCount = 1;
private readonly List<BoolFilterOption> statusFilterOptions = new()
{
new() { Value = null, Text = "Alle" },
new() { Value = true, Text = "True" },
new() { Value = false, Text = "False" }
};
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
{ {
await LoadPage(0); await LoadPage(0);
@@ -237,4 +249,10 @@ else
e.Cancel = true; e.Cancel = true;
return Task.CompletedTask; return Task.CompletedTask;
} }
private sealed class BoolFilterOption
{
public bool? Value { get; set; }
public string Text { get; set; } = string.Empty;
}
} }