css 如何让MudBlazor `context.Actions.StartEditingItemAsync`事件触发按钮`OnClick`事件,以在`MudDataGrid`上启用编辑?

dl5txlt9  于 2023-06-25  发布在  Git
关注(0)|答案(1)|浏览(214)

MudBlazor context.Actions.StartEditingItemAsync未触发StartedEditingItem事件:MudDataGrid行不可编辑。

我正在MudDataGrid上使用MudBlazor context.Actions.StartEditingItemAsync来启用列表中每个会议的内联编辑。当我单击按钮时,预期事件没有触发。下面是我的代码:

@page "/eventseditor"
@inject PartyTimeDbContext DbContext
@using Microsoft.EntityFrameworkCore;
@using PartyTime;
@using PartyTime.Shared;
@using PartyTime.Data.Models;

<MudText Typo="Typo.h5" Color="Color.Primary" Class="mb-5">Events Editor</MudText>

<MudDataGrid 
    T="Meeting" 
    Items="@Meetings" 
    EditMode="DataGridEditMode.Cell"
    StartedEditingItem="@StartedEditingItem" 
    CanceledEditingItem="@CanceledEditingItem" 
    CommittedItemChanges="@CommittedItemChanges"
    Bordered="true" 
    Dense="true"
    EditTrigger="DataGridEditTrigger.Manual"
    FixedHeader="true">

    <Columns>
        <PropertyColumn Property="m => m.Name" Title="Title" IsEditable="false" />
        <PropertyColumn Property="m => m.Description"  />
        <PropertyColumn Property="m => m.StartTime" Title="Start" />
        <PropertyColumn Property="m => m.EndTime" Title="End" />
        <PropertyColumn Property="m => m.PublishTime" Title="Publish" />
        <PropertyColumn Property="m => m.UnpublishTime" Title="Unpublish" />
        <TemplateColumn Title="Edit">
            <CellTemplate>
                <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Outlined.Edit" OnClick="@(()=>context.Actions.StartEditingItemAsync())" />
            </CellTemplate>
        </TemplateColumn>
    </Columns>

</MudDataGrid>

@code 
{
    private List<Meeting> Meetings { get; set; }

    protected override void OnInitialized()
    {
        Meetings = DbContext.Meetings
            .Include(m => m.Location)
            .Include(m => m.Category)
            .ToList();
    }

    void StartedEditingItem(Meeting meeting)
    {
        // code needed for editing
    }

    void CanceledEditingItem(Meeting meeting)
    {
        // code needed for canceling changes
    }

    void CommittedItemChanges(Meeting meeting)
    {
        // code needed for committing/saving changes
    }
}

我遵循MudBlazor MudDataGrid Editing提供的示例

tzdcorbm

tzdcorbm1#

数据网格的默认值为ReadOnly="true",因此,一旦我将属性ReadOnly="false"添加到<MudDataGrid>组件中,这些行就变成了可编辑的。

@page "/eventseditor"
@inject PartyTimeDbContext DbContext
@using Microsoft.EntityFrameworkCore;
@using PartyTime;
@using PartyTime.Shared;
@using PartyTime.Data.Models;

<MudText Typo="Typo.h5" Color="Color.Primary" Class="mb-5">Events Editor</MudText>

<MudDataGrid 
    T="Meeting" 
    Items="@Meetings" 
    ReadOnly="false"
    EditMode="DataGridEditMode.Cell"
    StartedEditingItem="@StartedEditingItem" 
    CanceledEditingItem="@CanceledEditingItem" 
    CommittedItemChanges="@CommittedItemChanges"
    Bordered="true" 
    Dense="true"
    EditTrigger="DataGridEditTrigger.Manual"
    FixedHeader="true">

    <Columns>
        <PropertyColumn Property="m => m.Name" Title="Title" IsEditable="false" />
        <PropertyColumn Property="m => m.Description"  />
        <PropertyColumn Property="m => m.StartTime" Title="Start" />
        <PropertyColumn Property="m => m.EndTime" Title="End" />
        <PropertyColumn Property="m => m.PublishTime" Title="Publish" />
        <PropertyColumn Property="m => m.UnpublishTime" Title="Unpublish" />
        <TemplateColumn Title="Edit">
            <CellTemplate>
                <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Outlined.Edit" OnClick="@(()=>context.Actions.StartEditingItemAsync())" />
            </CellTemplate>
        </TemplateColumn>
    </Columns>

</MudDataGrid>

@code 
{
    private List<Meeting> Meetings { get; set; }

    protected override void OnInitialized()
    {
        Meetings = DbContext.Meetings
            .Include(m => m.Location)
            .Include(m => m.Category)
            .ToList();
    }

    void StartedEditingItem(Meeting meeting)
    {
        // code needed for editing
    }

    void CanceledEditingItem(Meeting meeting)
    {
        // code needed for canceling changes
    }

    void CommittedItemChanges(Meeting meeting)
    {
        // code needed for committing/saving changes
    }
}

相关问题