Making a Cell Editable in Blazor Quick Grid – Blazor

The Problem:

In a Blazor Quick Grid component, there is a grid with various columns, including one that shows a summary. The task is to make this summary cell editable, allowing users to modify it directly within the grid. Two-way binding is necessary to guarantee that changes are reflected in the underlying data source. How can the code be changed to create an editable cell for the summary in the Blazor Quick Grid with two-way binding?

The Solutions:

Solution 1: Adding a TemplateColumn with an editable input field

To make the summary cell editable in the Blazor Quick Grid, you can add a TemplateColumn with an input type text. This allows you to place a text input field inside the grid cell, which users can use to update the summary value.

Here’s an example of how to achieve this:

<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>
</div>

In this code:

• The TemplateColumn is added to the QuickGrid.
• Inside the TemplateColumn, a div element is used to create a container for the input field.
• A label element is used to wrap the input field and provide a label for it.
• The input field has a type of “text” and its value is bound to the @context.Summary property using the @bind directive.

With this setup, the summary cell will now be editable. Users can click on the input field and enter a new value. The @bind directive will ensure that the changes are reflected in the underlying data source.

Solution 2: Dynamically bind the editable cell value to a property in the parent component

This solution involves creating an additional property in the parent component to hold the value of the editable cell. The editable cell is then bound to this property, allowing for two-way data binding and updates to be reflected in the underlying data source.

The code snippet below demonstrates how to implement this solution:

<!– begin snippet: js hide: false console: true babel: false –>

<!– language: lang-html –>

 <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 @bind="EditableSummary" />
        </ColumnOptions>
    </PropertyColumn>
    <TemplateColumn>
        <div>
            <span>Wow, its really @EditableSummary today</span>
        </div>
    </TemplateColumn>
</QuickGrid>

<!– end snippet –>

In this code:

1. A new property called EditableSummary is created in the parent component. This property will hold the value of the editable summary cell.

2. The input element within the ColumnOptions is bound to the EditableSummary property using the @bind directive. This establishes two-way data binding between the input field and the EditableSummary property.

3. When the user edits the value in the summary cell, the changes are reflected in the EditableSummary property.

4. The TemplateColumn displays the value of the EditableSummary property, providing a dynamic and editable summary cell.

Video Explanation: