How to implement the inline editing for this grid using devexpress blazor

Question

I have a created a grid using devexpress blazor. I want to implement an inline editing for this grid, although devexpress haven't implemented any inline editing functionality.

Here is ht code i have used for this Grid.

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

    }
}
}

I haved tried in different ways. But i couldn't find any proper solution for that. thanks in advance. All appreciation would be highly appreciated.

Answer 1

Currently, there is no straightforward way to do so. That's why I suggest that you wait until this feature is implemented since it is in the Backlog of the DevExpress Blazor team. Please follow the updates in the blogs.