Making a Cell Editable in Blazor Quick Grid

Question

I'm working with the Blazor Quick Grid component and I have a grid with several columns, one of which displays a summary. I want to make this summary cell editable, so users can update it directly within the grid. Here's my current code:

 <QuickGrid Items="forecasts.AsQueryable()" ResizableColumns>
    <PropertyColumn Property="f => f.Date" Format="dddd, dd MMMM yyyy" Sortable="true"></PropertyColumn>
    <PropertyColumn Property="f => f.TemperatureC" Title="Temp (C)" Sortable="true"></PropertyColumn>
    <PropertyColumn Property="f => f.TemperatureF" Title="Temp (F)" Sortable="true"></PropertyColumn>
    <PropertyColumn Property="f => f.Summary">
        <ColumnOptions>
            <input/>
        </ColumnOptions>
    </PropertyColumn>
    <TemplateColumn>
        <div>
            <span>Wow, its really @context.Summary today</span>
        </div>
    </TemplateColumn>
</QuickGrid>

I'm not sure how to correctly bind the value and ensure that changes are updated in the underlying data source. Can someone guide me on how to modify the code to achieve an editable cell for the summary in the Blazor Quick Grid with two way binding?

Github repo for the sample implementation

https://github.com/aathirakhusi/blazor-quick-grid

Answer 1

By adding a TemplateColumn with an input type text helped me to add the editable cell inside quickgrid

<div class="grid" tabindex="-1" style="display: @(loading ? "none" : "block")">
<QuickGrid ItemsProvider="wfProvider">
    <PropertyColumn Format="dd-MM-yyyy"
                    Property="@(c => c.Date)" Sortable="true" IsDefaultSort="SortDirection.Ascending" />
    <PropertyColumn Property="@(c => c.TemperatureC)" />
    <PropertyColumn Property="@(c => c.TemperatureF)" />
    <TemplateColumn Sortable="true" Title="Summary">
        <div>
            <label>
                <input type="text" @bind="@context.Summary" />
            </label>
        </div>
    </TemplateColumn>
</QuickGrid>

Answer 2

To make a QuickGrid work as GridView in .NET 4.8 I created variable where I save actually edited row by binding each input to variable property. This way I implemented all four methods (Edit, Update, Cancel, Delete)

 <QuickGrid Items="@seznamKnih" Class="table" @ref="mujSeznam" Pagination="strankovani"  >
 <TemplateColumn Title="Autor knihy" Class="align-middle fit">
     @if (context.Id == idRadkuEditace)
     {
         <input type="search" class="form-control bg-warning-subtle" @bind="editovanaPolozka.Author" />
     }
     else
     {
         <label>@context.Author</label>
     }
 </TemplateColumn>
 <TemplateColumn Title="Název" Class="align-middle">
     @if (context.Id == idRadkuEditace)
     {
         <input type="search" class="form-control bg-warning-subtle" @bind="editovanaPolozka.Name" />
     }
     else
     {
         <label>@context.Name</label>
     }
 </TemplateColumn>
 <TemplateColumn Class="px-1 py-1 fit">
     @if (context.Id == idRadkuEditace)
     {
         <div class="d-flex gap-2">
             <div class="col-6">
                 <button class="btn btn btn-outline-warning" @onclick="Zrusit"><i class="fa-solid fa-ban"></i> Storno</button>
             </div>
             <div class="col-6">
                 <button class="btn btn btn-outline-success w-100 text-start" @onclick="Ulozit"><i class="fa-regular fa-floppy-disk"></i> Uložit</button>

             </div>
         </div>
     }
     else
     {
         <div class="d-flex gap-2 w-100">
             <div class="col-6"><button class="btn btn btn-outline-primary" @onclick="@(()=>Upravit(context))"><i class="fa-regular fa-pen-to-square"></i> Upravit</button></div>
             <div class="col-6"><button class="btn btn btn-outline-danger" @onclick="@(()=>Smazat(context))"><i class="fa-regular fa-trash-can"></i> Smazat</button></div>
         </div>
     }
 </TemplateColumn>