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

I don't recommend trying to use add-ons (even officially endorsed ones like quickgrid). It's really not that hard to make your own components in Blazor, and then you will have very easy and total control over everything in the component, including editing. With experience, you can make a custom component like this about 10x faster than it will take you to look up instructions on GitHub, ask questions here, and so on. — Bennyboy1973, Aug 07 '23 at 08:19

Aathira · Accepted Answer · 2023-08-31T13:09:09.947

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>

Making a Cell Editable in Blazor Quick Grid

1 Answers1