blazorquickgrid

Making a Cell Editable in Blazor Quick Grid


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


Solution

  • 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>