From 9bbe34deceea6e718022a48f124fad18959bd245 Mon Sep 17 00:00:00 2001
From: OlgunR <OlgunR@DD-PC-ENT05N>
Date: Thu, 5 Feb 2026 11:37:06 +0100
Subject: [PATCH] Enhance grid filter UI with custom editors for each type

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.
---
 .../Components/CatalogsGrid.razor             | 56 ++++++++++++++++---
 .../Components/MassDataGrid.razor             | 36 +++++++++---
 .../Components/CatalogsGrid.razor             | 56 ++++++++++++++++---
 .../Components/MassDataGrid.razor             | 36 +++++++++---
 4 files changed, 152 insertions(+), 32 deletions(-)

diff --git a/DbFirst.BlazorWasm/Components/CatalogsGrid.razor b/DbFirst.BlazorWasm/Components/CatalogsGrid.razor
index 25b9a0a..42973ee 100644
--- a/DbFirst.BlazorWasm/Components/CatalogsGrid.razor
+++ b/DbFirst.BlazorWasm/Components/CatalogsGrid.razor
@@ -83,13 +83,55 @@ else
                 DataItemDeleting="OnDataItemDeleting">
             <Columns>
                 <DxGridCommandColumn Width="120px" />
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.Guid)" Caption="Id" Width="140px" SortIndex="0" SortOrder="GridColumnSortOrder.Ascending" />
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatTitle)" Caption="Titel" />
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatString)" Caption="String" />
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWho)" Caption="Angelegt von" ReadOnly="true" />
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWhen)" Caption="Angelegt am" ReadOnly="true" />
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWho)" Caption="Geändert von" ReadOnly="true" />
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWhen)" Caption="Geändert am" ReadOnly="true" />
+                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.Guid)" Caption="Id" Width="140px" SortIndex="0" SortOrder="GridColumnSortOrder.Ascending">
+                    <FilterRowCellTemplate Context="filter">
+                        <DxTextBox Text="@(filter.FilterRowValue?.ToString())"
+                                   TextChanged="@(value => filter.FilterRowValue = value)"
+                                   CssClass="filter-search-input" />
+                    </FilterRowCellTemplate>
+                </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>
             <EditFormTemplate Context="editFormContext">
                 @{ SetEditContext(editFormContext.EditContext); var editModel = (CatalogEditModel)editFormContext.EditModel; }
diff --git a/DbFirst.BlazorWasm/Components/MassDataGrid.razor b/DbFirst.BlazorWasm/Components/MassDataGrid.razor
index b4f5524..a0fba53 100644
--- a/DbFirst.BlazorWasm/Components/MassDataGrid.razor
+++ b/DbFirst.BlazorWasm/Components/MassDataGrid.razor
@@ -116,23 +116,28 @@ else
                 </DxGridDataColumn>
                 <DxGridDataColumn FieldName="@nameof(MassDataReadDto.StatusFlag)" Caption="Status" ReadOnly="true">
                     <FilterRowCellTemplate Context="filter">
-                        <DxTextBox Text="@(filter.FilterRowValue?.ToString())"
-                                   TextChanged="@(value => filter.FilterRowValue = value)"
-                                   CssClass="filter-search-input" />
+                        <DxComboBox Data="@statusFilterOptions"
+                                    TData="BoolFilterOption"
+                                    TValue="bool?"
+                                    TextFieldName="Text"
+                                    ValueFieldName="Value"
+                                    Value="@(filter.FilterRowValue as bool?)"
+                                    ValueChanged="@(value => filter.FilterRowValue = value)"
+                                    Width="100%" />
                     </FilterRowCellTemplate>
                 </DxGridDataColumn>
                 <DxGridDataColumn FieldName="@nameof(MassDataReadDto.AddedWhen)" Caption="Added" ReadOnly="true">
                     <FilterRowCellTemplate Context="filter">
-                        <DxTextBox Text="@(filter.FilterRowValue?.ToString())"
-                                   TextChanged="@(value => filter.FilterRowValue = value)"
-                                   CssClass="filter-search-input" />
+                        <DxDateEdit Date="@((DateTime?)filter.FilterRowValue)"
+                                    DateChanged="@((DateTime? value) => filter.FilterRowValue = value)"
+                                    Width="100%" />
                     </FilterRowCellTemplate>
                 </DxGridDataColumn>
                 <DxGridDataColumn FieldName="@nameof(MassDataReadDto.ChangedWhen)" Caption="Changed" ReadOnly="true">
                     <FilterRowCellTemplate Context="filter">
-                        <DxTextBox Text="@(filter.FilterRowValue?.ToString())"
-                                   TextChanged="@(value => filter.FilterRowValue = value)"
-                                   CssClass="filter-search-input" />
+                        <DxDateEdit Date="@((DateTime?)filter.FilterRowValue)"
+                                    DateChanged="@((DateTime? value) => filter.FilterRowValue = value)"
+                                    Width="100%" />
                     </FilterRowCellTemplate>
                 </DxGridDataColumn>
             </Columns>
@@ -169,6 +174,13 @@ else
     private int pageIndex;
     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()
     {
         await LoadPage(0);
@@ -237,4 +249,10 @@ else
         e.Cancel = true;
         return Task.CompletedTask;
     }
+
+    private sealed class BoolFilterOption
+    {
+        public bool? Value { get; set; }
+        public string Text { get; set; } = string.Empty;
+    }
 }
diff --git a/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor b/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
index e59fd81..322c3b5 100644
--- a/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
+++ b/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
@@ -42,13 +42,55 @@ else
                 DataItemDeleting="OnDataItemDeleting">
             <Columns>
                 <DxGridCommandColumn Width="120px" />
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.Guid)" Caption="Id" Width="140px" SortIndex="0" SortOrder="GridColumnSortOrder.Ascending" />
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatTitle)" Caption="Titel" />
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatString)" Caption="String" />
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWho)" Caption="Angelegt von" ReadOnly="true" />
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWhen)" Caption="Angelegt am" ReadOnly="true" />
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWho)" Caption="Geändert von" ReadOnly="true" />
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWhen)" Caption="Geändert am" ReadOnly="true" />
+                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.Guid)" Caption="Id" Width="140px" SortIndex="0" SortOrder="GridColumnSortOrder.Ascending">
+                    <FilterRowCellTemplate Context="filter">
+                        <DxTextBox Text="@(filter.FilterRowValue?.ToString())"
+                                   TextChanged="@(value => filter.FilterRowValue = value)"
+                                   CssClass="filter-search-input" />
+                    </FilterRowCellTemplate>
+                </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>
             <EditFormTemplate Context="editFormContext">
                 @{ SetEditContext(editFormContext.EditContext); var editModel = (CatalogEditModel)editFormContext.EditModel; }
diff --git a/DbFirst.BlazorWebApp/Components/MassDataGrid.razor b/DbFirst.BlazorWebApp/Components/MassDataGrid.razor
index b4f5524..a0fba53 100644
--- a/DbFirst.BlazorWebApp/Components/MassDataGrid.razor
+++ b/DbFirst.BlazorWebApp/Components/MassDataGrid.razor
@@ -116,23 +116,28 @@ else
                 </DxGridDataColumn>
                 <DxGridDataColumn FieldName="@nameof(MassDataReadDto.StatusFlag)" Caption="Status" ReadOnly="true">
                     <FilterRowCellTemplate Context="filter">
-                        <DxTextBox Text="@(filter.FilterRowValue?.ToString())"
-                                   TextChanged="@(value => filter.FilterRowValue = value)"
-                                   CssClass="filter-search-input" />
+                        <DxComboBox Data="@statusFilterOptions"
+                                    TData="BoolFilterOption"
+                                    TValue="bool?"
+                                    TextFieldName="Text"
+                                    ValueFieldName="Value"
+                                    Value="@(filter.FilterRowValue as bool?)"
+                                    ValueChanged="@(value => filter.FilterRowValue = value)"
+                                    Width="100%" />
                     </FilterRowCellTemplate>
                 </DxGridDataColumn>
                 <DxGridDataColumn FieldName="@nameof(MassDataReadDto.AddedWhen)" Caption="Added" ReadOnly="true">
                     <FilterRowCellTemplate Context="filter">
-                        <DxTextBox Text="@(filter.FilterRowValue?.ToString())"
-                                   TextChanged="@(value => filter.FilterRowValue = value)"
-                                   CssClass="filter-search-input" />
+                        <DxDateEdit Date="@((DateTime?)filter.FilterRowValue)"
+                                    DateChanged="@((DateTime? value) => filter.FilterRowValue = value)"
+                                    Width="100%" />
                     </FilterRowCellTemplate>
                 </DxGridDataColumn>
                 <DxGridDataColumn FieldName="@nameof(MassDataReadDto.ChangedWhen)" Caption="Changed" ReadOnly="true">
                     <FilterRowCellTemplate Context="filter">
-                        <DxTextBox Text="@(filter.FilterRowValue?.ToString())"
-                                   TextChanged="@(value => filter.FilterRowValue = value)"
-                                   CssClass="filter-search-input" />
+                        <DxDateEdit Date="@((DateTime?)filter.FilterRowValue)"
+                                    DateChanged="@((DateTime? value) => filter.FilterRowValue = value)"
+                                    Width="100%" />
                     </FilterRowCellTemplate>
                 </DxGridDataColumn>
             </Columns>
@@ -169,6 +174,13 @@ else
     private int pageIndex;
     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()
     {
         await LoadPage(0);
@@ -237,4 +249,10 @@ else
         e.Cancel = true;
         return Task.CompletedTask;
     }
+
+    private sealed class BoolFilterOption
+    {
+        public bool? Value { get; set; }
+        public string Text { get; set; } = string.Empty;
+    }
 }