.netasp.net-coreblazorhtml-select

Setting an option to selected in a drop down in Blazor


I have a Telerik grid and am using inline editing. On edit, I have a select dropdown list for the user to select the option that he needs. In my view model if the user is in edit mode I would like for the drop down to have the selected value. It doesn't seem to work properly. Here is the column in my grid:

                <GridColumn Field=@nameof(JobAssignmentListViewModel.Trade) Title="Trade" FieldType="@typeof(string)">
                    <EditorTemplate>
                        <select id="tradeList" class="form-select" value="@(context as JobAssignmentListViewModel).TradeId" @onchange="@(e => UpdateTradeAsync((JobAssignmentListViewModel)context, e))">
                            @foreach (var trade in trades)
                            {
                                var isSelected = trade.Id == (context as JobAssignmentListViewModel)?.TradeId;
                                <option value="@trade.Id" selected="@isSelected">@trade.Name</option>
                                
                            }
                        </select>
                    </EditorTemplate>
                </GridColumn>

This just renders selected="" in the HTML when inspected. Is there a way to select the default option in Blazor for a dropdown?


Solution

  • You could try following sample:

    @page "/"
    <TelerikGrid Data=@JobAssignments EditMode="@GridEditMode.Inline" Pageable="true"
                 Height="500px" @ref="GridRef"
                 OnUpdate="@UpdateItem"
                 OnEdit="@EditHandler">
        <GridColumns>
            <GridColumn Field="Id" Title="ID" FieldType="@typeof(int)" Editable="false" />
    
            <GridColumn Field="@nameof(JobAssignmentListViewModel.Trade)" Title="Trade" FieldType="@typeof(string)" Editable="true">
                <EditorTemplate>
                    @if (context is JobAssignmentListViewModel model)
                    {
                        <select class="form-select" value="@model.Trade" @onchange="@(e => UpdateTradeAsync(model, e))">
                            @foreach (var trade in Trades)
                            {
                                <option value="@trade.Name">@trade.Name</option>
                            }
                        </select>
                    }
                </EditorTemplate>
            </GridColumn>
    
            <GridCommandColumn>
                <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Save</GridCommandButton>
                <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
                <GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
                <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
            </GridCommandColumn>
    
        </GridColumns>
    </TelerikGrid>
    
    @code {
    
        private async Task UpdateTradeAsync(JobAssignmentListViewModel model, ChangeEventArgs e)
        {
                var selectedTrade = e.Value?.ToString();
                model.Trade = selectedTrade;      
                await Task.CompletedTask; 
        }
        private TelerikGrid<JobAssignmentListViewModel> GridRef { get; set; }
    
        // Sample Trades list
        private List<Trade> Trades = new()
        {
            new Trade { Id = 1, Name = "Plumber" },
            new Trade { Id = 2, Name = "Electrician" },
            new Trade { Id = 3, Name = "Carpenter" }
        };
    
        // Sample Job Assignments
        private List<JobAssignmentListViewModel> JobAssignments = new()
        {
            new JobAssignmentListViewModel { Id = 1, Trade = "Electrician" },
            new JobAssignmentListViewModel { Id = 2, Trade = "Carpenter" }
        };
    
        // Called when an item is edited
        private void EditHandler(GridCommandEventArgs args)
        {
            var editedItem = args.Item as JobAssignmentListViewModel;
        }
    
        // Called when an item is updated (saved)
        private void UpdateItem(GridCommandEventArgs args)
        {
            var updatedItem = args.Item as JobAssignmentListViewModel;
            if (updatedItem != null)
            {
                var item = JobAssignments.FirstOrDefault(j => j.Id == updatedItem.Id);
                if (item != null)
                {
                    item.Trade = updatedItem.Trade;
                }
            }
        }
    
        // Model for the grid
        public class JobAssignmentListViewModel
        {
            public int Id { get; set; }
            public string Trade { get; set; }
        }
    
        // Model for trades
        public class Trade
        {
            public int Id { get; set; }
            public string Name { get; set; }
        }
    }