如何使用 devexpress blazor 实现此网格的内联编辑

Question

我使用 devexpress blazor 创建了一个网格。我想为这个网格实现一个内联编辑，虽然 devexpress 没有实现任何内联编辑功能。

这是我用于此网格的 ht 代码。

@if (dischargeBoards == null)
{
    <p><em>Loading...</em></p>
}
else
{

 <div class="card demo-card-wide border-bottom-0">
        <div class="card-header border-bottom-0">
            ClientVisitGuid: <b>@(selectedRow == null ? (object)"(none)" : selectedRow.ClientVisitGuid)</b>&nbsp;
            CurrentLocationGUID: <b>@(selectedRow == null ? (object)"(none)" : selectedRow.CurrentLocationGUID)</b>&nbsp;
            PatientName: <b>@(selectedRow == null ? "(none)" : selectedRow.PatientName)</b>
        </div>
     </div>
<DxDataGrid Data="@dischargeBoards"
            ShowFilterRow="false"
            @bind-SingleSelectedDataRow="@SelectedRow"
                    
                    ShowPager="true"
                    ShowGroupPanel="true"
                    PageSize="19">


    <DxDataGridColumn Field="@nameof(DischargeBoardVisit.LocationGroup)" Caption="L/C Group" AllowGroup="true"></DxDataGridColumn>
    <DxDataGridColumn Field="@nameof(DischargeBoardVisit.Location)" Width="100px"></DxDataGridColumn>
    <DxDataGridColumn Field="@nameof(DischargeBoardVisit.PatientName)" SortIndex="0" Width="240px"></DxDataGridColumn>
    <DxDataGridColumn Field="@nameof(DischargeBoardVisit.Service)" Width="240px"></DxDataGridColumn>
    <DxDataGridDateEditColumn Field="@nameof(DischargeBoardVisit.DischargeDateExp)"
                                               DisplayFormatString="MM/dd/yyyy"
                                               EditFormatString="d"></DxDataGridDateEditColumn>
    <DxDataGridColumn Field="@nameof(DischargeBoardVisit.DischargeTimeExp)" Caption="Time Exp"></DxDataGridColumn>
    <DxDataGridColumn Field="@nameof(DischargeBoardVisit.Family)" Caption="Family">
        <DisplayTemplate>
            @{

                var checkboxFamily = (context as DischargeBoardVisit).Family;

                if (checkboxFamily)
                    {

                    <button class="btn btn-success btn-circle btn-circle-sm m-1">@*<i class="fa fa-check"></i>*@</button>
                    }
                    else
                    {

                    <button class="btn btn-danger btn-circle btn-circle-sm m-1"></button>
                    }
            }
        </DisplayTemplate>
    </DxDataGridColumn>


            <DxDataGridColumn Field="@nameof(DischargeBoardVisit.Rehab)">
        <DisplayTemplate>
            @{

                    var checkboxRehab = (context as DischargeBoardVisit).Rehab;
                //<input type="checkbox" checked="@checkboxRehab" disabled readonly />
                if (checkboxRehab)
                    {

                    <button class="btn btn-success btn-circle btn-circle-sm m-1">@*<i class="fa fa-check"></i>*@</button>
                    }
                    else
                    {

                    <button class="btn btn-danger btn-circle btn-circle-sm m-1"></button>
                    }

            }
        </DisplayTemplate>
    </DxDataGridColumn>

    <DxDataGridColumn Field="@nameof(DischargeBoardVisit.Comment)" Width="240px"></DxDataGridColumn>

</DxDataGrid>
}

@code {
DischargeBoardVisit[] dischargeBoards;
// readonly string _id = Guid.NewGuid().ToString();

[Parameter]
public string DisplayFormatString { get; set; }

protected override async Task OnInitializedAsync()
{

    dischargeBoards = await DischageBoard.GetDischargeAsync();
    SelectedRow = dischargeBoards.FirstOrDefault();
}

public DischargeBoardVisit context { get; set; }




DischargeBoardVisit selectedRow;

public DischargeBoardVisit SelectedRow
{
    get
    {
        return selectedRow;
    }
    set
    {
        selectedRow = value;
        InvokeAsync(StateHasChanged);

    }
}
}

我尝试过不同的方法。但我找不到任何合适的解决方案。 提前致谢。所有的赞赏将不胜感激。

Answer 1

目前，没有直接的方法可以做到这一点。这就是为什么我建议您等到实现此功能，因为它在 DevExpress Blazor 团队的待办事项中。请关注blogs中的更新。