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

@@ -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" />

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++);
+        if (ShowCommandColumn)
-        builder.AddAttribute(seq++, "Width", "120px");
+        {
-        builder.CloseComponent();
+            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 =>
             {

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

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