Editable Dropdown in DataGrid

Radzen.Blazor Components
1

I cannot get the dropdowns inside of the datagrid to show the selected value. If I select one of the options, it doesn't show it selected. Any ideas? I'm following this exactly: Blazor DataGrid InLine Editing

Here is the code:

@page "/MaintenanceItems/Index"

@using Model.MaintenanceItems
@using BeamMillBlazor.Application.Interfaces

@inject IMaintenanceItemsData _maintenanceItemsData;

<PageTitle>Maintenance Items</PageTitle>

<BSContainer IsFluid="true">
    <BSCard style="margin-top: 1rem;" CardType="CardType.Card">
        <BSCard style="font-weight:600; font-size: 1.18rem; background-color: #006325; color: ghostwhite;" CardType="CardType.Header">Maintenance Items</BSCard>
        <BSCard style="border: .1rem solid #006325;" CardType="CardType.Body">
            @if (!maintenanceItemsLoading)
            {
                <RadzenButton Style="margin-bottom: 10px; background-color: #006325;" Text="Add New Item" Click="@InsertRow" />
                <RadzenDataGrid AllowSorting="true" @ref="maintenanceItemsGrid" Data="@maintenanceItems" TItem="MaintenanceItemModel" EditMode="Radzen.DataGridEditMode.Single" RowUpdate="@OnUpdateRow" RowCreate="@OnCreateRow">
                    <EmptyTemplate>
                        <p style="color: darkgrey; font-size: 1.1rem; text-align: center; margin: 2rem;">No records to display.</p>
                    </EmptyTemplate>
                    <Columns>
                        <RadzenDataGridColumn Width="90px" TItem="MaintenanceItemModel" Property="Name" Title="Name">
                            <EditTemplate Context="item">
                                <RadzenTextBox Style="width: 100%;" @bind-Value="@item.Name" />
                            </EditTemplate>
                        </RadzenDataGridColumn>
                        <RadzenDataGridColumn Width="55px" TItem="MaintenanceItemModel" Property="AreaName" Title="Area">
                            <EditTemplate Context="item">
                                <RadzenDropDown Style="width: 100%;" @bind-Value="@item.AreaName" Data="@areaNames" />
                            </EditTemplate>
                        </RadzenDataGridColumn>
                        <RadzenDataGridColumn Width="55px" TItem="MaintenanceItemModel" Property="Discipline" Title="Discipline">
                            <EditTemplate Context="item">
                                <RadzenDropDown Style="width: 100%;" @bind-Value="@item.Discipline" Data="@disciplines" />
                            </EditTemplate>
                        </RadzenDataGridColumn>
                        <RadzenDataGridColumn Width="90px" TItem="MaintenanceItemModel" Property="WorkItem" Title="Work Item">
                            <EditTemplate Context="item">
                                <RadzenTextArea Style="width: 100%;" @bind-Value="@item.WorkItem" />
                            </EditTemplate>
                        </RadzenDataGridColumn>
                        <RadzenDataGridColumn Width="240px" TItem="MaintenanceItemModel" Property="Notes" Title="Notes">
                            <EditTemplate Context="item">
                                <RadzenTextArea Style="width: 100%;" @bind-Value="@item.Notes" />
                            </EditTemplate>
                        </RadzenDataGridColumn>
                        <RadzenDataGridColumn Width="50px" TItem="MaintenanceItemModel" Property="DateEntered" Title="Entered" />
                        <RadzenDataGridColumn Width="50px" TItem="MaintenanceItemModel" Property="DelayType" Title="Delay Type">
                            <EditTemplate Context="item">
                                <RadzenDropDown Style="width: 100%;" @bind-Value="@item.DelayType" Data="@delayTypes" />
                            </EditTemplate>
                        </RadzenDataGridColumn>
                        <RadzenDataGridColumn TItem="MaintenanceItemModel" Context="sampleBlazorModelsSampleOrder" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="30px">
                            <Template Context="item">
                                <RadzenButton Style="width: 100%;" Icon="edit" ButtonStyle="ButtonStyle.Light" Click="@(args => EditRow(item))" @onclick:stopPropagation="true" />
                            </Template>
                            <EditTemplate Context="item">
                                <BSRow>
                                    <RadzenButton Style="width: 100%; margin-top: .5rem;" Icon="check" ButtonStyle="ButtonStyle.Success" Click="@((args) => SaveRow(item))" />
                                    <RadzenButton Style="width: 100%; margin-top: .5rem;" Icon="close" ButtonStyle="ButtonStyle.Light" Click="@((args) => CancelEdit(item))" />
                                </BSRow>
                            </EditTemplate>
                        </RadzenDataGridColumn>
                        <RadzenDataGridColumn TItem="MaintenanceItemModel" Context="order" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="30px">
                            <Template Context="item">
                                <RadzenButton Style="width: 100%;" ButtonStyle="ButtonStyle.Danger" Icon="delete" Click="@(args => DeleteRow(item))" @onclick:stopPropagation="true" />
                            </Template>
                            <EditTemplate Context="item">
                                <RadzenButton Style="width: 100%;" ButtonStyle="ButtonStyle.Danger" Icon="delete" Click="@(args => DeleteRow(item))" />
                            </EditTemplate>
                        </RadzenDataGridColumn>
                    </Columns>
                </RadzenDataGrid>
            }
            else
            {
                <BSCard Class="skeleton" CardType="CardType.Body" />
            }
        </BSCard>
    </BSCard>
</BSContainer>

@code {
    private List<MaintenanceItemModel>? maintenanceItems;
    private MaintenanceItemModel? maintenanceItemToInsert;
    private RadzenDataGrid<MaintenanceItemModel>? maintenanceItemsGrid;
    private MaintenanceItemModel? tmpMaintenanceItem;
    private bool maintenanceItemsLoading = true;

    private List<string> areaNames = new() { "RHF", "Rolling Mill", "Roll Shop", "Cooling Bed", "Straightener", "Cold Saw", "Stacker/Removal" };
    private List<string> disciplines = new() { "Operations", "Mechanical", "Electrical" };
    private List<string> delayTypes = new() { "All Delays", "Line Operating", "Roll Change", "Projects", "Outage", "Down Day" };

    protected override async Task OnInitializedAsync()
    {
        maintenanceItems = await _maintenanceItemsData.GetMaintenanceItems();
        maintenanceItemsLoading = false;
    }

    protected async Task EditRow(MaintenanceItemModel item)
    {
        tmpMaintenanceItem = new();
        tmpMaintenanceItem.Name = item.Name;
        tmpMaintenanceItem.AreaName = item.AreaName;
        tmpMaintenanceItem.Discipline = item.Discipline;
        tmpMaintenanceItem.WorkItem = item.WorkItem;
        tmpMaintenanceItem.Notes = item.Notes;
        tmpMaintenanceItem.DelayType = item.DelayType;

        await maintenanceItemsGrid!.EditRow(item);
    }

    protected async Task OnUpdateRow(MaintenanceItemModel item)
    {
        if (item == maintenanceItemToInsert)
        {
            maintenanceItemToInsert = null;
        }

        await _maintenanceItemsData.UpdateMaintenanceItem(item);
    }

    protected async Task SaveRow(MaintenanceItemModel item)
    {
        if (item == maintenanceItemToInsert)
        {
            maintenanceItemToInsert = null;
        }

        await maintenanceItemsGrid!.UpdateRow(item);
    }

    protected void CancelEdit(MaintenanceItemModel item)
    {
        if (item == maintenanceItemToInsert)
        {
            maintenanceItemToInsert = null;
        }

        item.Name = tmpMaintenanceItem!.Name;
        item.AreaName = tmpMaintenanceItem.AreaName;
        item.Discipline = tmpMaintenanceItem.Discipline;
        item.WorkItem = tmpMaintenanceItem.WorkItem;
        item.Notes = tmpMaintenanceItem.Notes;
        item.DelayType = tmpMaintenanceItem.DelayType;

        maintenanceItemsGrid!.CancelEditRow(item);
    }

    protected async Task DeleteRow(MaintenanceItemModel item)
    {
        if (item == maintenanceItemToInsert)
        {
            maintenanceItemToInsert = null;
        }

        if (maintenanceItems!.Contains(item))
        {
            await _maintenanceItemsData.MarkComplete(item.Id);
            maintenanceItems.Remove(item);
            await maintenanceItemsGrid!.Reload();
        }
        else
        {
            maintenanceItemsGrid!.CancelEditRow(item);
        }
    }

    protected async Task InsertRow()
    {
        maintenanceItemToInsert = new MaintenanceItemModel();
        await maintenanceItemsGrid!.InsertRow(maintenanceItemToInsert);
    }

    protected async Task OnCreateRow(MaintenanceItemModel item)
    {
        await _maintenanceItemsData.CreateMaintenanceItem(item);
    }

    protected void DropdownOnChange(object value)
    {
        var str = value is IEnumerable<object> ? string.Join(", ", (IEnumerable<object>)value) : value;

        Console.WriteLine(str);
    }
}
2

This should be work:

<RadzenDataGridColumn Context="item" Width="55px" TItem="MaintenanceItemModel" Property="AreaName" Title="Area">
                <EditTemplate>
                    <RadzenDropDown Style="width: 100%;" @bind-Value="@item.AreaName" Data="@areaNames" TextProperty="AreaName" ValueProperty="Id" />
                </EditTemplate>
            </RadzenDataGridColumn>

In my case i have a referance in my object to list by id

<RadzenDataGridColumn Context="category" TItem="QuizCategory" Property="QuizTypeId" Title="Typ quizu">
                <EditTemplate>
                    <RadzenDropDown SelectedItemsText="Name" @bind-Value=@category.QuizTypeId TextProperty="Name" ValueProperty="Id" TValue="int"
                                Data=@QuizTypes Style="width: 100%; max-width: 400px;" />
                </EditTemplate>
            </RadzenDataGridColumn>
1 Like