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.
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user