How to make Grid table row editable

Radzen Studio Blazor Server
1

Hello, is it posible to make gird row editable some how ? can i make that then i click row all another rows collapse.

Have a great day,
Lukas Berteska

2

It will be released as feature with next Radzen.Blazor update:

image
image.png1920×1080 116 KB 

<RadzenGrid @ref="grid0" AllowFiltering="true" AllowPaging="true" AllowSorting="true" RowUpdate="Grid0RowUpdate"
            Data="@(getOrdersResult)" TItem="SampleBlazor.Models.Sample.Order" RowSelect="@Grid0RowSelect">
    <Columns>
        <RadzenGridColumn TItem="SampleBlazor.Models.Sample.Order" Context="sampleBlazorModelsSampleOrder" Property="Id" Title="Id" Type="integer">
        </RadzenGridColumn>
        <RadzenGridColumn TItem="SampleBlazor.Models.Sample.Order" Context="sampleBlazorModelsSampleOrder" Property="UserName" Title="User Name" Type="string">
            <EditTemplate Context="sampleBlazorModelsSampleOrder">
                <RadzenTextBox @bind-Value="@sampleBlazorModelsSampleOrder.UserName" Style="width:100%" />
            </EditTemplate>
        </RadzenGridColumn>
        <RadzenGridColumn TItem="SampleBlazor.Models.Sample.Order" Context="sampleBlazorModelsSampleOrder" Format="date-time" FormatString="{0:MM/dd/yyyy}" Property="OrderDate" Title="Order Date" Type="string">
            <EditTemplate Context="sampleBlazorModelsSampleOrder">
                <RadzenDatePicker @bind-Value="@sampleBlazorModelsSampleOrder.OrderDate" Style="width:100%" />
            </EditTemplate>
        </RadzenGridColumn>
        <RadzenGridColumn TItem="SampleBlazor.Models.Sample.Order" Context="sampleBlazorModelsSampleOrder" Bubble="false" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="150px">
            <Template Context="sampleBlazorModelsSampleOrder">
                <RadzenButton Icon="edit" Size="ButtonSize.Small" Click="@((args) =>grid0.EditRow(sampleBlazorModelsSampleOrder))">
                </RadzenButton>
            </Template>
            <EditTemplate Context="sampleBlazorModelsSampleOrder">
                <RadzenButton Icon="save" Size="ButtonSize.Small" Click="@((args) =>grid0.UpdateRow(sampleBlazorModelsSampleOrder))">
                </RadzenButton>
                <RadzenButton Icon="cancel" Size="ButtonSize.Small" ButtonStyle="ButtonStyle.Secondary" Click="@((args) =>grid0.CancelEditRow(sampleBlazorModelsSampleOrder))">
                </RadzenButton>
            </EditTemplate>
        </RadzenGridColumn>
        <RadzenGridColumn TItem="SampleBlazor.Models.Sample.Order" Context="sampleBlazorModelsSampleOrder" Bubble="false" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="70px">
            <Template Context="sampleBlazorModelsSampleOrder">
                <RadzenButton @ref="gridDeleteButton" ButtonStyle="ButtonStyle.Danger" Icon="close" Size="ButtonSize.Small" Click="@((args) =>GridDeleteButtonClick(args, sampleBlazorModelsSampleOrder))">
                </RadzenButton>
            </Template>
        </RadzenGridColumn>
    </Columns>
</RadzenGrid>

protected async void Grid0RowUpdate(SampleBlazor.Models.Sample.Order args)
{
    var result = await Sample.UpdateOrder(args.Id, args);
    await InvokeAsync(() => { StateHasChanged(); });
}
3

Just published Radzen.Blazor 1.0.9 with EditTemplate support for DataGrid columns. Demo added as well:

image
image.png1920×1080 338 KB

Later we will update the example with add new records functionality and we will add new templates to Radzen to be able to auto-generate such pages directly from your data source automatically .

4

Hello,

I am using the DataGrid and would like to know if the functionality of adding new records is available and how it works.

I would also like to know if in the DataGrid Inline Editing, you can control that only a single record is edited, collapsing the rest for example.

Thank you.

Regards.

1 Like