From c93518202baf019cb7b215600d1096c5ef11df56 Mon Sep 17 00:00:00 2001
From: OlgunR <OlgunR@DD-PC-ENT05N>
Date: Fri, 17 Apr 2026 12:08:39 +0200
Subject: [PATCH] Add custom toolbar actions with icons to grids

Introduce Add, Edit, and Delete buttons with Bootstrap Icons in the toolbars of CatalogsGrid and MassDataGrid. Hide the default command column by overriding ShowCommandColumn. Update BandGridBase to conditionally render the command column. Track focused row index for toolbar actions, enabling row operations via toolbar instead of the grid's built-in command column. Add Bootstrap Icons stylesheet to App.razor.
---
 DbFirst.BlazorWebApp/Components/App.razor     |  1 +
 .../Components/BandGridBase.cs                | 13 ++++---
 .../Components/CatalogsGrid.razor             | 37 +++++++++++++++++++
 .../Components/MassDataGrid.razor             | 37 +++++++++++++++++++
 4 files changed, 83 insertions(+), 5 deletions(-)

diff --git a/DbFirst.BlazorWebApp/Components/App.razor b/DbFirst.BlazorWebApp/Components/App.razor
index 98a93a3..f6e8697 100644
--- a/DbFirst.BlazorWebApp/Components/App.razor
+++ b/DbFirst.BlazorWebApp/Components/App.razor
@@ -18,6 +18,7 @@
     <link href="_content/DevExpress.Blazor.Dashboard/dx-dashboard.light.min.css" rel="stylesheet" />
 
     <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
 
     <link rel="stylesheet" href="app.css" />
     <link rel="stylesheet" href="DbFirst.BlazorWebApp.styles.css" />
diff --git a/DbFirst.BlazorWebApp/Components/BandGridBase.cs b/DbFirst.BlazorWebApp/Components/BandGridBase.cs
index 29bbec7..47766cd 100644
--- a/DbFirst.BlazorWebApp/Components/BandGridBase.cs
+++ b/DbFirst.BlazorWebApp/Components/BandGridBase.cs
@@ -103,6 +103,8 @@ public abstract class BandGridBase<TItem> : ComponentBase
     // --- Band-Methoden ---
     protected bool CanSaveBandLayout => !string.IsNullOrWhiteSpace(layoutUser);
 
+    protected virtual bool ShowCommandColumn => true;
+
     protected void AddBand()
     {
         bandLayout.Bands.Add(new BandDefinition { Id = Guid.NewGuid().ToString("N"), Caption = "Band" });
@@ -172,9 +174,12 @@ public abstract class BandGridBase<TItem> : ComponentBase
     protected RenderFragment RenderColumns() => builder =>
     {
         var seq = 0;
-        builder.OpenComponent<DxGridCommandColumn>(seq++);
-        builder.AddAttribute(seq++, "Width", "120px");
-        builder.CloseComponent();
+        if (ShowCommandColumn)
+        {
+            builder.OpenComponent<DxGridCommandColumn>(seq++);
+            builder.AddAttribute(seq++, "Width", "120px");
+            builder.CloseComponent();
+        }
 
         var grouped = bandLayout.Bands.SelectMany(b => b.Columns).ToHashSet(StringComparer.OrdinalIgnoreCase);
         foreach (var column in ColumnDefinitions.Where(c => !grouped.Contains(c.FieldName)))
@@ -184,8 +189,6 @@ public abstract class BandGridBase<TItem> : ComponentBase
         {
             if (band.Columns.Count == 0) continue;
             builder.OpenComponent<DxGridBandColumn>(seq++);
-            builder.AddAttribute(seq++, "Width", "120px");
-            builder.AddAttribute(seq++, "NewButtonVisible", false); // falls noch nicht vorhanden
             builder.AddAttribute(seq++, "Caption", band.Caption);
             builder.AddAttribute(seq++, "Columns", (RenderFragment)(bandBuilder =>
             {
diff --git a/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor b/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
index 4647b7f..ca33b29 100644
--- a/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
+++ b/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
@@ -59,9 +59,34 @@ else
                 DataItemDeleting="OnDataItemDeleting"
                 FocusedRowEnabled="true"
                 @bind-FocusedRowKey="focusedRowKey"
+                RowClick="@(args => _focusedVisibleIndex = args.VisibleIndex)"
                 @ref="gridRef">
             <ToolbarTemplate>
                 <DxToolbar>
+                    <DxToolbarItem Alignment="ToolbarItemAlignment.Left">
+                        <Template Context="_">
+                            <DxButton IconCssClass="bi bi-plus-lg"
+                                      RenderStyle="ButtonRenderStyle.Secondary"
+                                      RenderStyleMode="ButtonRenderStyleMode.Text"
+                                      Click="@(() => gridRef!.StartEditNewRowAsync())" />
+                        </Template>
+                    </DxToolbarItem>
+                    <DxToolbarItem Alignment="ToolbarItemAlignment.Left">
+                        <Template Context="_">
+                            <DxButton IconCssClass="bi bi-pencil"
+                                      RenderStyle="ButtonRenderStyle.Secondary"
+                                      RenderStyleMode="ButtonRenderStyleMode.Text"
+                                      Click="EditFocusedRow" />
+                        </Template>
+                    </DxToolbarItem>
+                    <DxToolbarItem Alignment="ToolbarItemAlignment.Left">
+                        <Template Context="_">
+                            <DxButton IconCssClass="bi bi-trash"
+                                      RenderStyle="ButtonRenderStyle.Secondary"
+                                      RenderStyleMode="ButtonRenderStyleMode.Text"
+                                      Click="DeleteFocusedRow" />
+                        </Template>
+                    </DxToolbarItem>
                     <DxToolbarItem Alignment="ToolbarItemAlignment.Right">
                         <Template Context="_">
                             <DxButton Text="Spalten"
@@ -134,6 +159,7 @@ else
     private string popupHeaderText = "Edit";
 
     protected override string LayoutKey => "CatalogsGrid";
+    protected override bool ShowCommandColumn => false;
 
     protected override List<ColumnDefinition> ColumnDefinitions { get; } = new()
 {
@@ -353,6 +379,17 @@ else
         public string Text { get; set; } = string.Empty;
     }
 
+    private int _focusedVisibleIndex;
+
+    private async Task EditFocusedRow()
+        => await gridRef!.StartEditRowAsync(_focusedVisibleIndex);
+
+    private Task DeleteFocusedRow()
+    {
+        gridRef!.ShowRowDeleteConfirmation(_focusedVisibleIndex);
+        return Task.CompletedTask;
+    }
+
     private async Task SaveLayoutWithFeedbackAsync()
     {
         try
diff --git a/DbFirst.BlazorWebApp/Components/MassDataGrid.razor b/DbFirst.BlazorWebApp/Components/MassDataGrid.razor
index 954ac38..e55ffeb 100644
--- a/DbFirst.BlazorWebApp/Components/MassDataGrid.razor
+++ b/DbFirst.BlazorWebApp/Components/MassDataGrid.razor
@@ -72,9 +72,34 @@ else
                 DataItemDeleting="OnDataItemDeleting"
                 FocusedRowEnabled="true"
                 @bind-FocusedRowKey="focusedRowKey"
+                RowClick="@(args => _focusedVisibleIndex = args.VisibleIndex)"
                 @ref="gridRef">
             <ToolbarTemplate>
                 <DxToolbar>
+                    <DxToolbarItem Alignment="ToolbarItemAlignment.Left">
+                        <Template Context="_">
+                            <DxButton IconCssClass="bi bi-plus-lg"
+                                      RenderStyle="ButtonRenderStyle.Secondary"
+                                      RenderStyleMode="ButtonRenderStyleMode.Text"
+                                      Click="@(() => gridRef!.StartEditNewRowAsync())" />
+                        </Template>
+                    </DxToolbarItem>
+                    <DxToolbarItem Alignment="ToolbarItemAlignment.Left">
+                        <Template Context="_">
+                            <DxButton IconCssClass="bi bi-pencil"
+                                      RenderStyle="ButtonRenderStyle.Secondary"
+                                      RenderStyleMode="ButtonRenderStyleMode.Text"
+                                      Click="EditFocusedRow" />
+                        </Template>
+                    </DxToolbarItem>
+                    <DxToolbarItem Alignment="ToolbarItemAlignment.Left">
+                        <Template Context="_">
+                            <DxButton IconCssClass="bi bi-trash"
+                                      RenderStyle="ButtonRenderStyle.Secondary"
+                                      RenderStyleMode="ButtonRenderStyleMode.Text"
+                                      Click="DeleteFocusedRow" />
+                        </Template>
+                    </DxToolbarItem>
                     <DxToolbarItem Alignment="ToolbarItemAlignment.Right">
                         <Template Context="_">
                             <DxButton Text="Spalten"
@@ -163,6 +188,7 @@ else
     private int? focusedRowKey;
 
     protected override string LayoutKey => "MassDataGrid";
+    protected override bool ShowCommandColumn => false;
 
     protected override List<ColumnDefinition> ColumnDefinitions { get; } = new()
 {
@@ -366,6 +392,17 @@ else
         public string Text { get; set; } = string.Empty;
     }
 
+    private int _focusedVisibleIndex;
+
+    private async Task EditFocusedRow()
+        => await gridRef!.StartEditRowAsync(_focusedVisibleIndex);
+
+    private Task DeleteFocusedRow()
+    {
+        gridRef!.ShowRowDeleteConfirmation(_focusedVisibleIndex);
+        return Task.CompletedTask;
+    }
+
     private async Task SaveLayoutWithFeedbackAsync()
     {
         try