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

Add custom toolbar actions with icons to grids

Browse Source 
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.
This commit is contained in:
OlgunR
2026-04-17 12:08:39 +02:00
parent 6792b426ff
commit c93518202b
4 changed files with 83 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
DbFirst.BlazorWebApp/Components/App.razor
View File

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

13
DbFirst.BlazorWebApp/Components/BandGridBase.cs
View File

@@ -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 =>
{

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

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

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

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